प्रतिक्रिया: "यह" एक घटक फ़ंक्शन के अंदर अपरिभाषित है

रिएक्ट में घटकों के साथ काम करते समय, आपको "यह है" त्रुटि का सामना करना पड़ सकता है घटक में परिभाषित फ़ंक्शन के भीतर अपरिभाषित"। यह भ्रमित करने वाला हो सकता है, क्योंकि आधिकारिक दस्तावेज़ के अनुसार, इसे घटक उदाहरण को संदर्भित करना चाहिए। तो, यह त्रुटि क्यों होती है?

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

इसे हल करने के लिए, आपको विधि को घटक से मैन्युअल रूप से बांधना होगा कंस्ट्रक्टर में उदाहरण। यहां बताया गया है कि आप इसे अपने उदाहरण में कैसे करेंगे:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

ऑनटॉगललूप विधि को कंस्ट्रक्टर में घटक से जोड़कर, आप सुनिश्चित करते हैं कि जब इवेंट हैंडलर से विधि को कॉल किया जाता है तो यह घटक को संदर्भित करता है। यह आपको विधि के भीतर घटक की स्थिति और प्रॉप्स तक पहुंचने की अनुमति देता है।

"यह अपरिभाषित है" त्रुटि से बचने के लिए कंस्ट्रक्टर में घटक उदाहरण तक पहुंच की आवश्यकता वाले किसी भी वर्ग विधियों को बांधना याद रखें।