इवेंट श्रोता और रिएक्ट हुक

समस्या: रिएक्ट हुक और इवेंट श्रोता का उपयोग करते समय, राज्य कंसोल लॉग गलत जानकारी प्रदर्शित करता है।

समस्या विवरण

प्रदान किए गए कोडसैंडबॉक्स पर विचार करें: https://codesandbox.io/s/lrxw1wr97m। जब आप "कार्ड जोड़ें" बटन पर दो बार क्लिक करते हैं, और फिर पहले कार्ड में "बटन1" पर क्लिक करते हैं, तो कंसोल दो कार्डों के साथ स्थिति को सही ढंग से प्रदर्शित करता है। हालाँकि, यदि आप उसी कार्ड में "बटन 2" पर क्लिक करते हैं (जिसे एक इवेंट श्रोता द्वारा नियंत्रित किया जाता है), तो कंसोल गलत स्थिति में केवल एक कार्ड प्रदर्शित करता है।

गलत स्थिति का कारण

कार्ड प्रदाता और कार्ड घटकों में इवेंट हैंडलर के अलग-अलग व्यवहार से समस्या उत्पन्न होती है। कार्डप्रोवाइडर कार्यात्मक घटक, हैंडलकार्डक्लिक और हैंडलबटनक्लिक के भीतर परिभाषित ईवेंट हैंडलर, घटक के प्रस्तुत होने पर हर बार फिर से परिभाषित होते हैं। इसका मतलब यह है कि वे उस समय की स्थिति को संदर्भित करते हैं जब वे परिभाषित होते हैं, जो ईवेंट श्रोता के ट्रिगर होने पर बासी हो सकता है। घटक के पूरे जीवनचक्र में। परिणामस्वरूप, इवेंट श्रोता फ़ंक्शन उस समय की स्थिति को संदर्भित करता है जब घटक माउंट किया गया था, जो पुराना है।

समाधान - स्टेट अपडेटर फ़ंक्शन का उपयोग करना

एक समाधान स्टेट अपडेटर का उपयोग करना है फ़ंक्शन जो संलग्न दायरे से पुरानी स्थिति पर भरोसा करने के बजाय एक तर्क के रूप में ताजा स्थिति प्राप्त करता है:

const इवेंट लिस्टनर = () => { // फ़ंक्शन ताज़ा स्थिति प्राप्त करता है सेटस्टेट(ताज़ास्टेट => ताज़ास्टेट 1); }; // इवेंट श्रोता को `useEffect` का उपयोग करके पंजीकृत किया जाता है ताकि यह सुनिश्चित किया जा सके कि यह केवल एक बार पंजीकृत है उपयोगप्रभाव(() => { // इवेंट श्रोता को पंजीकृत करें // ... // घटक अनमाउंट पर ईवेंट श्रोता को अपंजीकृत करें वापसी () => { // ... }; }, []);

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 () => {
    // ...
  };
}, []);

अन्य समाधान

इस समस्या के समाधान के वैकल्पिक तरीकों में शामिल हैं:

परिवर्तनीय राज्य:
• उपयोगस्टेट के बजाय यूज़रेफ का उपयोग करना।
मैन्युअल इवेंट श्रोता पुनः पंजीकरण:
• हर बार स्थिति बदलने पर इवेंट श्रोता को फिर से पंजीकृत करना।
अंतर्निहित इवेंट हैंडलिंग:
• कस्टम इवेंट श्रोताओं के बजाय रिएक्ट के अंतर्निहित इवेंट हैंडलिंग का उपयोग करना।