إستعمال API في ريآكت

بتاريخ 39 دقائق مضت قال محمود سعداوي:

صحيح في الأول ظهرت 4 مستخدمين لكن بعد تحديث الصفحة رجع يوزر واحد

أردت إحضار مستخدم أو إثنين على الأكثر لأني أريد تطبيق بعض الدوال كإضافة مستخدم جديد

جرب تعديل الكود للشكل التالي :

const [data, setData] = useState([]);
async function fetchRandomUsers() {
  const response = await fetch("https://randomuser.me/api");
  const responseData = await response.json(); // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحال;
  const newUser = {
    user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`,
    money: Math.floor(Math.random() * 1000000),
  };
  setData([...data, newUser]);
  return newUser;
}

useEffect(() => {
  // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين
  (async () => {
    const users = [];
    for (let i = 0; i < 5; i++) {
      const newUser = await fetchRandomUsers();
      users.push(newUser);
    }
    setData(users);
  })();
}, []);

عدل الكود للشكل :

function App() {
  const [data, setData] = useState([]);
  async function fetchRandomUsers() {
    const response = await fetch('https://randomuser.me/api')
    const responseData = await response.json() // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحالة
    const newUser = [
      ...data, // الكود المضاف
      {
        user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`,
        money: Math.floor(Math.random() * 1000000)
      }
    ]
    setData(newUser)
  }

  useEffect(() => { 
    // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين
    for (let i = 0; i < 5; i++) {
      fetchRandomUsers();
    }
  }, []);

وسيتم اضافة اكثر من يوزر 

والافضل هو ان تحضر عدد من المستخدمين العشوائيين في طلب واحد باستخدام الـ api :

https://randomuser.me/api?results=10

بدلاً من احضار مستخدم عشوائي واحد اكثر من مرة

بتاريخ 20 دقائق مضت قال عمر قره محمد:

useEffect(() => { 
    // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين
    for (let i = 0; i < 5; i++) {
      fetchRandomUsers();
    }
  }, []);

صحيح في الأول ظهرت 4 مستخدمين لكن بعد تحديث الصفحة رجع يوزر واحد

بتاريخ 21 دقائق مضت قال عمر قره محمد:

والافضل هو ان تحضر عدد من المستخدمين العشوائيين في طلب واحد باستخدام الـ api :

https://randomuser.me/api?results=10

أردت إحضار مستخدم أو إثنين على الأكثر لأني أريد تطبيق بعض الدوال كإضافة مستخدم جديد

1- بخصوص سؤالك حول ظهور المستخدم الأول ثم اختفاءه بعد ثانية، فإن ذلك يرجع إلى أن الدالة fetchRandomUsers تعيد تعيين قيمة الـ state data لتحتوي على مستخدم واحد فقط عند كل استدعاء. وبما أن fetchRandomUsers تستدعى في الـ useEffect بعد جزء صفحة المستخدم يتم تحميله، فإن الحالة الأولى التي تتم عرضها تحتوي على مستخدم واحد، ولكن يتم تحديث الحالة كل ثانية مما يتسبب في تغيير الحالة إلى حالة خالية من المستخدمين. لحل هذه المشكلة، يمكن تعيين القيمة الجديدة للـ state باستخدام الدالة setData بدلاً من إعادة تعيينها كما يلي:

setData(prevState => [...prevState, newUser])

بذلك، يتم إضافة المستخدم الجديد إلى مصفوفة المستخدمين الموجودين بالفعل في الحالة بدلاً من استبدالهم بالمستخدم الجديد.

2- لإظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة، يمكن تعديل الـ fetchRandomUsers لتسترد أكثر من مستخدم واحد. مثلاً، يمكن استدعاء الدالة fetch مع عدد الأشخاص الذين نريد عرضهم، ثم تحويل النتيجة إلى مصفوفة من المستخدمين وإضافتها إلى state. على سبيل المثال:

async function fetchRandomUsers(numUsers) {
  const response = await fetch(`https://randomuser.me/api/?results=${numUsers}`);
  const data = await response.json();
  const newUsers = data.results.map(user => ({
    user: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000)
  }));
  setData(prevState => [...prevState, ...newUsers]);
}

ثم يمكن استدعاء fetchRandomUsers(2) على سبيل المثال لاسترداد مستخدمين اثنين وإضافتهم إلى state.

3- بخصوص جودة الكود، يمكن تحسين الكود: 

• من المستحسن استخدام try / catch في دالة fetchRandomUsers للتحقق من وجود أي أخطاء في طلب API ومعالجتها بشكل صحيح.
• التحقق من أن response.ok يساوي true قبل الاستمرار في دالة fetchRandomUsers للتأكد من عدم حدوث أي أخطاء في الطلب.
• يمكن تحسين الكود المسؤول عن تحويل البيانات التي تم إرجاعها من API (data.results) إلى قائمة مستخدمين جديدة.
• يمكن إعادة كتابة دالة useEffect لتفعيل الطلب عندما يتم تحديث numUsers بدلاً من تشغيلها مرة واحدة عندما يتم تحميل التطبيق.
• استخدام setState بشكل صحيح. تحتوي setData الحالية على مصفوفة فارغة ، لذلك يجب استدعاء setData مع newUsers بدلاً من [...prevState ، ...newUsers] لتحديث المصفوفة.
• وضع الدالة fetchRandomUsers خارج دالة App() ، حتى يمكن استخدامها في أي مكان في الكود.
• يمكن تحسين اسماء المتغيرات والدوال بشكل يعكس المعنى الذي يقوم به الكود. على سبيل المثال ، يمكن تسمية setData() بـ setUsers() ، وتسمية العنصر الحالي في useState() باسم users بدلاً من data.
• يمكن تحسين الكود عن طريق استخدام مكتبة axios لعملية الـ fetch، حيث توفر هذه المكتبة التحكم بالأخطاء بشكل أفضل.
• يمكنك استخدام async/await بدلاً من .then() لتبسيط الكود.
• قد يكون من الأفضل تمرير عدد الأشخاص الذين تريد جلبهم من خلال الـ fetchRandomUsers() بدلاً من تحديدها داخل الدالة.
• يمكنك إنشاء دالة منفصلة لمعالجة بيانات المستخدمين بدلاً من وضع الكود داخل دالة fetchRandomUsers().

إليك الكود بعد تحسينه:

import axios from 'axios';
import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  async function fetchRandomUsers(numUsers) {
    try {
      const response = await axios.get(`https://randomuser.me/api/?results=${numUsers}`);
      const newUsers = response.data.results.map(user => ({
        user: `${user.name.first} ${user.name.last}`,
        money: Math.floor(Math.random() * 1000000)
      }));
      setData(prevState => [...prevState, ...newUsers]);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchRandomUsers(10);
  }, []);

  return (
    <div>
      {data.map((user, index) => (
        <div key={index}>
          <p>{user.user}</p>
          <p>{user.money}</p>
        </div>
      ))}
    </div>
  );
}

export default App;