شرح صفوف ومحتوى الفقرة
كثيراً ما تكون مصفوفات البيانات فارغة في بيئة الإنتاج؛ كمستخدم جديد بلا إشعارات أو تصفية بحث لا تطابق أي دورة. احرص دوماً على فحص items.length === 0 لعرض حالة فارغة واضحة ومفيدة بدلاً من ترك مساحة بيضاء مربكة. يلخص الجدول التالي أدوات عرض القوائم:
| عملية المصفوفة | القيمة المُعادة | دورها في عرض قوائم React |
|---|---|---|
array.map(fn) | مصفوفة جديدة من عناصر JSX | تحويل كل كائن بيانات إلى مكون React مزود بمفتاح |
array.filter(fn) | مصفوفة فرعية مطابقة للشرط | انتقاء السجلات المطلوبة بنقاء قبل رسمها على الشاشة |
items.length === 0 | قيمة منطقية صريحة | رصد القوائم الخالية لعرض رسالة إرشادية واضحة |
array.forEach(fn) | القيمة undefined | غير صالحة داخل JSX لأنها لا تعيد مصفوفة عناصر |
HTML
function SearchResults({ courses }) {
if (courses.length === 0) {
return <p>No matching courses found.</p>;
}
return (
<ul>
{courses.map((c) => (
<li key={c.id}>{c.title}</li>
))}
</ul>
);
}
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس تحويل مصفوفات البيانات إلى قوائم مكونات ديناميكية بدالة map، وميزت الإرجاع الضمني والصريح بالدوال السهمية، وطبقت التصفية المسبقة بدالة filter، وفصلت مكون العنصر المفرد، وصممت واجهة القوائم الفارغة. الخطوة التالية: انتقل الآن إلى الدرس رقم 14 «أهمية خاصية المفتاح الفريد key في قوائم React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.