محمود_سعداوي نشر 5 مارس 2023 أرسل تقرير مشاركة نشر 5 مارس 2023 السلام عليكم. أريد جلب البيانات من الخادم ثم إظهارها على التطبيق الخاص بي. قمت بالكود التالي 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 شكرا على التوضيح. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 5 مارس 2023 أرسل تقرير مشاركة نشر 5 مارس 2023 لحل هذه المشكلة، يجب التأكد من أن نوع البيانات المستلمة من الخادم يتوافق مع التنسيق المتوقع للبيانات، وأيضًا يجب التحقق من الشكل الذي تأخذه البيانات قبل استخدامها في التطبيق. وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (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. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 5 مارس 2023 أرسل تقرير مشاركة نشر 5 مارس 2023 جرب استخدام الـ 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]}`); } في حال لم تعمل الطريقة السابقة، قم بمشاركة البيانات بالضبط حتى استطيع مساعدتك بالشكل الامثل. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 5 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 5 مارس 2023 بتاريخ منذ ساعة مضت قال عمر قره محمد: جرب استخدام الـ 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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 5 مارس 2023 أرسل تقرير مشاركة نشر 5 مارس 2023 بتاريخ 1 ساعة قال محمود سعداوي: تفضل ملف الsrc نفس الشيء data.results هو object وبالتالي لا تنطبق عليه map كما أخبرك مصطفى في التعليق السابق فإنه يمكنك استخدام ال map مع data.results بدون مشكلة حيث ال data.results هو مصفوفة كما في التوثيق الرسمي لل API من خلال هذا الرابط والبرنامج يعمل كما في الصورة التالية 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 6 مارس 2023 أرسل تقرير مشاركة نشر 6 مارس 2023 بتاريخ 8 ساعة قال محمود سعداوي: تفضل ملف الsrc لم يتم ارفاق الsrc اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 6 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 6 مارس 2023 بتاريخ 23 دقائق مضت قال عمر قره محمد: لم يتم ارفاق الsrc عفوا src.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 6 مارس 2023 أرسل تقرير مشاركة نشر 6 مارس 2023 بتاريخ 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 مستخدم مختلف. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أريد جلب البيانات من الخادم ثم إظهارها على التطبيق الخاص بي.
قمت بالكود التالي
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
شكرا على التوضيح.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
7 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.