شرح صفوف ومحتوى الفقرة
نادراً ما تكتفي تطبيقات React العملية بمصفوفات ثابتة مكتوبة يدوياً داخل الكود؛ بل تتصل لوحات التحكم ومنصات الدورات والمتاجر بواجهات برمجية خلفية لجلب بيانات JSON محدثة عبر الشبكة. يسير جلب البيانات في المتصفح وفق أربع خطوات متتابعة ومنظمة: تهيئة الحالة بقيمة ابتدائية آمنة مثل useState([])، ورسم الواجهة المبدئية فوراً دون تجميد الشاشة، ثم إطلاق طلب الشبكة داخل useEffect() بعد اعتماد العناصر في DOM، وأخيراً استدعاء دالة تحديث الحالة فور وصول الرد لإعادة رسم البطاقات تلقائياً.
يُمنع تماماً استدعاء fetch() مباشرة في جسم دالة المكون أثناء التصيير؛ لأن تحديث الحالة بعد وصول الرد سيعيد استدعاء المكون فيدخل التطبيق في حلقة طلبات لا نهائية.
HTML
useEffect(() => {
async function loadCourses() {
const res = await fetch('/api/courses');
const data = await res.json();
setCourses(data);
}
loadCourses();
}, []);