شرح صفوف ومحتوى الفقرة
يكفي تمرير مصفوفة اعتماديات فارغة [] عندما نحتاج إلى جلب البيانات مرة واحدة عند ظهور المكون. أما إذا اعتمد عنوان الطلب على خاصية ممررة مثل category أو حالة تصفية مثل searchQuery، فيجب إدراج جميع هذه القيم التفاعلية في مصفوفة الاعتماديات [category, searchQuery].
بمجرد تغيير المستخدم للتصنيف، ترصد React اختلاف القيمة وتعيد تشغيل التأثير تلقائياً لجلب القائمة المطابقة. احرص دائماً على تمرير المعاملات المتغيرة داخل encodeURIComponent() حتى لا تؤدي المسافات أو الرموز الخاصة مثل & إلى إفساد رابط الطلب.
HTML
useEffect(() => {
async function loadByCategory() {
const q = encodeURIComponent(category);
const url = `/api/courses?category=${q}`;
const res = await fetch(url);
if (res.ok) setCourses(await res.json());
}
loadByCategory();
}, [category]);