اختبار الوحدة: الـ State والأحداث

خمسة أسئلة عن هذه الوحدة. أجب عنها كلها، ثم شاهد نتيجتك وسبب صحة كل إجابة أو خطئها.

زر «+1 later» ينفّذ setTimeout(() => setCount(count + 1), 1000). نقرته ثلاث مرات خلال ثانية واحدة، وكانت count تساوي 0. كم تصبح بعد انطلاق المؤقّتات؟

3، لأن ثلاثة مؤقّتات عملت.
0، لأن الـ state لا يمكن ضبطه من مؤقّت.
خطأ بسبب ضبط الـ state خارج معالج أحداث.
1، لأن كل مؤقّت حسب 0 + 1. استخدم setCount((c) => c + 1) لتحصل على 3.

الدالة handleRemove تنفّذ const i = movies.findIndex((m) => m.id === id); movies.splice(i, 1); setMovies(movies);. لكن الفيلم لا يختفي. لماذا؟

تُرجع findIndex القيمة -1 لكل فيلم.
غيّرت splice المصفوفة الموجودة في مكانها، وأُعيدت المصفوفة نفسها، فلم ترَ React أي تغيير.
يجب أن تستدعي setMovies قبل تغيير المصفوفة.
لا يمكن تخزين المصفوفات في الـ state.

تنقر Add، فيظهر الفيلم الجديد للحظة، ثم يُعاد تحميل الصفحة ويختفي. ما الناقص؟

key على عنصر القائمة الجديد.
الـ useEffect لحفظ الفيلم.
e.preventDefault() في بداية معالج الإرسال الخاص بالنموذج.
الخاصية type="button" على زر Add.

هذا المؤقّت يعدّ بزيادة 2 كل ثانية أثناء التطوير. ما الإصلاح؟

JSX

useEffect(() => {
  setInterval(() => setSeconds((s) => s + 1), 1000);
}, []);

أرجِع دالة تنظيف: const id = setInterval(…); return () => clearInterval(id);
احذف StrictMode حتى يعمل الـ effect مرة واحدة.
أضف seconds إلى مصفوفة الاعتماديات.
استخدم setSeconds(seconds + 1) بدل دالة التحديث.

يحتفظ SearchBox بـ query في الـ state الخاص به. ويجب أن يعرض أخوه MovieList فقط الأفلام التي يحتوي عنوانها على نص البحث. ماذا تفعل؟

اجعل SearchBox يكتب نص البحث في localStorage، واجعل MovieList يقرؤه في كل render.
امنح MovieList الـ state الخاص به query، وانسخه من SearchBox بـ effect.
اعرض MovieList داخل SearchBox حتى يستطيع قراءة الـ state.
انقل query إلى أبيهما المشترك، ومرّره إلى كليهما، ومرّر معالج تغيير إلى SearchBox.

5 أسئلة بلا إجابة