السابق

التالي

إضافة Hooks

مكتمل

يمكنك استخدام Effect Hook لمراقبة حالة التطبيق الخاص بك، وتشغيل التعليمة البرمجية استجابة للتحديثات. نُسجل الدالة التي نريد تشغيلها استجابة للتغييرات باستخدام useEffect.

السيناريو

يسمح تطبيقنا للمستخدم بالنقر على العناصر الفردية؛ لوضع علامة عليها على أنها تم إعدادها. إذا لم يتم إعداد بعض العناصر بعد، نريد عرض الرسالة "Just keep chopping." عند الانتهاء من جميع العناصر، نريد عرض "Prep work done!"

سنقوم بإعداد هذا السلوك عن طريق إضافة عنصر حالة جديد. سنقوم بتحديث العنصر من Effect Hook الخاص بنا.

هام

في مثالنا، نُعدّل الحالة داخل useEffect. بشكل افتراضي، تعمل useEffect كلما تم تعديل أي كائن حالة. يمكن أن ينشئ هذا السلوك تكرارًا حلقيًا لا نهاية له. في هذه الحلقة، نقوم بتعديل الحالة، ويتم تشغيل Hook، الذي يعدل الحالة، التي تقوم بتشغيل Hook وهكذا.

لتجنب التكرار الحلقي اللانهائي، يمكننا استخدام معلمة التبعية على useEffect للبحث عن كائن واحد فقط. سنقوم بذلك عندما نقوم بإنشاء التعليمة البرمجية الخاص بنا.

إضافة خاصية الحالة الجديدة

1. افتح الملف App.jsx.

2. لإضافة خاصية الحالة الجديدة، أدرج التعليمة البرمجية التالية أسفل السطر الذي يقرأ، TODO: Add new state property.

   // TODO: Add new state property
   const [ prepared, setPrepared ] = useState(false);
   

إضافة وحدة استماع Effect Hook

لإضافة وحدة استماع خطاف التأثير، أدرج التعليمة البرمجية التالية أسفل السطر الذي يقرأ، TODO: Add the effect hook.

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

تَستخدم التعليمة البرمجية setPrepared لتحديث prepared. وتستخدم أسلوب every، الذي يقوم بإرجاع قيمة منطقية، استناداً إلى كل عنصر يطابق المعايير التي نُحددها. في حالتنا، نحن نتحقق ما إذا كان كل عنصر قد تم إعداده. إذا لم يكن كذلك، يسترجع الأسلوب False.

تُعيّن المعلمة الثانية على useEffect إلى [recipe]. يوفر هذا الإعداد التبعية للتأكد من تشغيل التعليمة البرمجية الخاصة بنا فقط عند حدوث تغيير في الكائن recipe.

إضافة العرض

الآن اعرض الرسالة للمستخدم إذا تم الانتهاء من عمل الإعداد. للقيام بذلك، أضف التعليمة البرمجية التالية أسفل السطر الذي يقرأ، TODO: Add the prep work display.

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

نبحث عن الكائن prepared. إذا كان ذلك صحيحاً، فإننا نعرض "Prep work done!" وإلا فإننا نعرض "Just keep chopping."

اختبر الصفحة

1. احفظ كافة الملفات.
2. ارجع إلى متصفحك وقم بتحديث الصفحة.
3. حدد المكونات لوضع علامة عليهم جميعًا على أن تم إعدادهم. (يجب شطبها جميعاً من القائمة.) يتم تحديث النص في أسفل الصفحة.

متابعة