रिएक्ट मैप पुनरावृत्तियों में बाइंडिंग फ़ंक्शन्स

समस्या विवरण

रिएक्ट में मैप फ़ंक्शन का उपयोग करते समय, डेवलपर्स को त्रुटि का सामना करना पड़ सकता है, "टाइप एरर: नहीं हो सकता अपरिभाषित की संपत्ति पढ़ें।" यह त्रुटि तब होती है जब एक विशिष्ट विधि, जैसे ऑनप्लेयरस्कोरचेंज, को मानचित्र फ़ंक्शन के भीतर बुलाया जाता है, लेकिन इसे सही ढंग से बाध्य नहीं किया गया है।

घटक पदानुक्रम को समझना

दिए गए रिएक्ट एप्लिकेशन में, डेटा प्रवाह और घटक पदानुक्रम निम्नानुसार संरचित हैं:

• ग्रैंडपेरेंट घटक: ऐप ग्रैंडचाइल्ड घटक के साथ इंटरैक्ट करता है और ऑनप्लेयरस्कोरचेंज विधि को संभालता है।
• चाइल्ड घटक: प्लेयर दादा-दादी से डेटा प्राप्त करता है और इसे पोते-पोती घटक को भेजता है।
• ग्रैंडचाइल्ड घटक: काउंटर उपयोगकर्ता इनपुट को संभालता है और ग्रैंडपेरेंट घटक में ऑनप्लेयरस्कोरचेंज विधि के साथ इंटरैक्ट करता है।

मैप फ़ंक्शंस के लिए बाइंडिंग फ़ंक्शंस

त्रुटि उत्पन्न होती है क्योंकि ऑनप्लेयरस्कोरचेंज विधि ग्रैंडपेरेंट घटक में मैप फ़ंक्शन के भीतर सही ढंग से बाध्य नहीं है। मानचित्र पुनरावृत्तियों के भीतर फ़ंक्शन का उपयोग करते समय बाइंडिंग आवश्यक है क्योंकि मानचित्र फ़ंक्शन का संदर्भ रिएक्ट घटक संदर्भ से भिन्न होता है। नतीजतन, यह मैप फ़ंक्शन के भीतर रिएक्ट घटक को संदर्भित नहीं करता है, जिससे इसके गुणों तक पहुंच संबंधी समस्याएं पैदा होती हैं।

इसे हल करने के दो सामान्य तरीके हैं:

एरो फ़ंक्शंस का उपयोग करना

एरो फ़ंक्शंस घटक के संदर्भ को अंतर्निहित रूप से बांधते हैं। इस मामले में, निम्नलिखित कोड त्रुटि का समाधान करेगा:

{this.state.initialPlayers.map((player, index) => {
                return(
                    
                )
            })}

फ़ंक्शन बाइंडिंग का स्पष्ट रूप से उपयोग करना

एक अन्य दृष्टिकोण बाइंड विधि का उपयोग करके फ़ंक्शन को स्पष्ट रूप से बाइंड करना है। इसे घटक के इस संदर्भ को बाइंड विधि के तर्क के रूप में पास करके प्राप्त किया जा सकता है:

{this.state.initialPlayers.map(function(player, index) {
                return(
                    
                )
            })}

मानचित्र पुनरावृत्ति के भीतर ऑनप्लेयरस्कोरचेंज विधि को बांधने के लिए इनमें से किसी भी तरीके को नियोजित करके, त्रुटि का समाधान किया जाना चाहिए।