مستمعو الأحداث وخطافات React

المشكلة: عند استخدام خطافات React ومستمعي الأحداث، يعرض سجل وحدة التحكم معلومات غير صحيحة.

وصف المشكلة

ضع في اعتبارك CodeSandbox المقدم: https://codesandbox.io/s/lrxw1wr97m. عند النقر فوق الزر "إضافة بطاقة" مرتين، ثم النقر فوق "Button1" في البطاقة الأولى، تعرض وحدة التحكم الحالة ببطاقتين بشكل صحيح. ومع ذلك، إذا قمت بالنقر فوق "Button2" في نفس البطاقة (والتي تتم معالجتها بواسطة مستمع الحدث)، فستعرض وحدة التحكم بشكل غير صحيح بطاقة واحدة فقط في الحالة.

سبب الحالة غير الصحيحة

تنشأ المشكلة من المعاملة المختلفة لمعالجات الأحداث في مكونات CardsProvider وCard. تتم إعادة تعريف معالجات الأحداث المحددة داخل المكون الوظيفي CardsProvider، HandleCardClick وhandleButtonClick، في كل مرة يتم فيها عرض المكون. هذا يعني أنها تشير إلى الحالة في لحظة تعريفها، والتي يمكن أن تكون قديمة عند تشغيل مستمع الحدث.

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

الحل - استخدام وظيفة محدث الحالة

أحد الحلول هو استخدام محدث الحالة دالة تتلقى حالة جديدة كوسيطة، بدلاً من الاعتماد على الحالة التي لا معنى لها من النطاق المتضمن:

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

في هذا السيناريو، يتلقى مستمع الحدث الحالة الجديدة، مما يزيل مشكلة البيانات القديمة. ومع ذلك، من المهم ملاحظة أن وظيفة تحديث الحالة يمكنها إرجاع نفس الحالة لمنع التحديثات غير الضرورية. استخدم console.log ضمن وظيفة محدث الحالة لمراقبة تغييرات الحالة.

تتضمن الطرق البديلة لمعالجة هذه المشكلة ما يلي:

قابل للتغيير الحالة:

استخدام useRef بدلاً من useState.
• إعادة تسجيل مستمع الحدث اليدوي:
إعادة تسجيل مستمع الحدث في كل مرة تتغير الحالة.
• التعامل مع الأحداث المضمنة:
استخدام معالجة الأحداث المضمنة في React بدلاً من مستمعي الأحداث المخصصة.