اذهب إلى المحتوى
  • 0

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

محمود_سعداوي

السؤال

السلام عليكم.

أريد جلب البيانات من الخادم ثم إظهارها على التطبيق الخاص بي.

قمت بالكود التالي

const [data, setData] = useState([]);
  // Fetch users
  const fetchRandomUsers = () => {
    fetch('https://randomuser.me/api')
      .then(response => response.json())
      .then(data => setData(data.data));
  }

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

 

المشكلة هنا أني لا أستطيع تطبيق الدالة map على data بغرض إظهار users لأن:

typeof(data) === object

شكرا على التوضيح.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

جرب استخدام الـ 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]}`);
}

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

جرب استخدام الـ 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

تفضل ملف الsrc

نفس الشيء

data.results هو object

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

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

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

والبرنامج يعمل كما في الصورة التالية1751876159_Screenshot2023-03-05234950.thumb.png.fc2424cbd4afa04720567edc6e551fe5.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...