جلب البيانات من الخادم في ريآكت

لحل هذه المشكلة، يجب التأكد من أن نوع البيانات المستلمة من الخادم يتوافق مع التنسيق المتوقع للبيانات، وأيضًا يجب التحقق من الشكل الذي تأخذه البيانات قبل استخدامها في التطبيق.

وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (object)، إلا أنه يحتوي على مفتاح "data" الذي يتضمن مصفوفة من البيانات التي يمكن استخدامها. لذلك، يمكن استخدام الدالة map() بعد الوصول إلى مصفوفة البيانات في كائن الاستجابة.

لتطبيق الدالة map() على مصفوفة البيانات، يمكن تعديل الكود كما يلي:

const [data, setData] = useState([]);
// Fetch users
const fetchRandomUsers = () => {
  fetch('https://randomuser.me/api')
    .then(response => response.json())
    .then(data => setData(data.results)); // اتصال بين مصفوفة النتائج في البيانات و state
}

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

// تطبيق الدالة map() على مصفوفة البيانات
return (
  <div>
    {data.map(user => (
      <div key={user.login.uuid}>
        <img src={user.picture.medium} alt={user.name.first} />
        <p>{user.name.first} {user.name.last}</p>
      </div>
    ))}
  </div>
);

في هذا المثال، تم تعديل setData() لاستخدام مفتاح النتائج (results) الموجود في البيانات التي تم استردادها من الخادم. وبعد ذلك، يتم تطبيق الدالة map() على مصفوفة البيانات لإنشاء قائمة المستخدمين. يجب تذكير بوضع الخاصية الفريدة (key) لكل عنصر في المصفوفة، والتي تساعد في تحديث العناصر بشكل صحيح في React.

جرب استخدام الـ for..in مثل :

const user = {

    name: 'John Doe',

    email: 'john.doe@example.com',

    age: 25,

    dob: '08/02/1989',

    active: true
};

for (const key in user) {

    console.log(`${key}: ${user[key]}`);
}

في حال لم تعمل الطريقة السابقة، قم بمشاركة البيانات بالضبط حتى استطيع مساعدتك بالشكل الامثل.

بتاريخ منذ ساعة مضت قال عمر قره محمد:

جرب استخدام الـ for..in مثل :

const user = {

    name: 'John Doe',

    email: 'john.doe@example.com',

    age: 25,

    dob: '08/02/1989',

    active: true
};

for (const key in user) {

    console.log(`${key}: ${user[key]}`);
}

في حال لم تعمل الطريقة السابقة، قم بمشاركة البيانات بالضبط حتى استطيع مساعدتك بالشكل الامثل.

 

تفضل ملف الsrc

بتاريخ منذ ساعة مضت قال Mustafa Suleiman:

لحل هذه المشكلة، يجب التأكد من أن نوع البيانات المستلمة من الخادم يتوافق مع التنسيق المتوقع للبيانات، وأيضًا يجب التحقق من الشكل الذي تأخذه البيانات قبل استخدامها في التطبيق.

وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (object)، إلا أنه يحتوي على مفتاح "data" الذي يتضمن مصفوفة من البيانات التي يمكن استخدامها. لذلك، يمكن استخدام الدالة map() بعد الوصول إلى مصفوفة البيانات في كائن الاستجابة.

لتطبيق الدالة map() على مصفوفة البيانات، يمكن تعديل الكود كما يلي:

const [data, setData] = useState([]);
// Fetch users
const fetchRandomUsers = () => {
  fetch('https://randomuser.me/api')
    .then(response => response.json())
    .then(data => setData(data.results)); // اتصال بين مصفوفة النتائج في البيانات و state
}

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

// تطبيق الدالة map() على مصفوفة البيانات
return (
  <div>
    {data.map(user => (
      <div key={user.login.uuid}>
        <img src={user.picture.medium} alt={user.name.first} />
        <p>{user.name.first} {user.name.last}</p>
      </div>
    ))}
  </div>
);

في هذا المثال، تم تعديل setData() لاستخدام مفتاح النتائج (results) الموجود في البيانات التي تم استردادها من الخادم. وبعد ذلك، يتم تطبيق الدالة map() على مصفوفة البيانات لإنشاء قائمة المستخدمين. يجب تذكير بوضع الخاصية الفريدة (key) لكل عنصر في المصفوفة، والتي تساعد في تحديث العناصر بشكل صحيح في React.

نفس الشيء

data.results هو object

وبالتالي لا تنطبق عليه map

بتاريخ 1 ساعة قال محمود سعداوي:

تفضل ملف الsrc

نفس الشيء

data.results هو object

وبالتالي لا تنطبق عليه map

كما أخبرك مصطفى في التعليق السابق فإنه يمكنك استخدام ال map مع data.results بدون مشكلة

حيث ال data.results هو مصفوفة كما في التوثيق الرسمي لل API من خلال هذا الرابط 

والبرنامج يعمل كما في الصورة التالية

بتاريخ 8 ساعة قال محمود سعداوي:

تفضل ملف الsrc

لم يتم ارفاق الsrc

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

لم يتم ارفاق الsrc

عفوا

src.zip

بتاريخ 1 ساعة قال محمود سعداوي:

عفوا

src.zip 2.27 kB · 0 تنزيلات

لقد قمت بالاطلاع على الـ api الذي قمت بمشاركته وهو يحتوي على user واحد فقط جرب الذهاب للرابط ومشاهدة النتيجة :
https://randomuser.me/api

أما إذا اردت احضار اكثر من user فأنت بحاجة لاستخدام الرابط التالي :

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

حيث تضيف ال query المسماة results و تعطيها عدد المستخدمين الذين تريد الحصول عليهم وفي الرابط السابق اضفت العدد 20.

جرب فتح الرابط السابق وستلاحظ ان الـ results هي مصفوفة تحتوي على 20 مستخدم مختلف.