जब आप पहली बार रिएक्ट घटकों को लिखना शुरू करते हैं, तो आप रास्ते में कई अलग-अलग त्रुटियों का सामना कर सकते हैं। ऐसी दो त्रुटियां हैं "अपरिभाषित की संपत्ति 'सेटस्टेट' नहीं पढ़ सकती" और "यह.सेटस्टेट एक फ़ंक्शन नहीं है"। यह लेख इन त्रुटियों को दूर करने के कुछ तरीकों पर एक नज़र डालता है।

क्यों?

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

पहली नज़र में, कोड ठीक दिखता है, लेकिन अगर हम करीब से देखते हैं, तो हम देखते हैं कि हैंडल चेंज विधि ऐप क्लास के लिए बाध्य नहीं है, इसलिए "यह" कीवर्ड इस उदाहरण में विंडो को संदर्भित करेगा। करीब से देखने के लिए, हैंडल चेंज विधि की पहली पंक्ति और फिर रेंडर की पहली पंक्ति दोनों में एक कंसोल.लॉग (यह) जोड़ें:

handleChange(e) { console.log(this, "change") this.setState({[e.target.name]:e.target.value}) }

रेंडर() { कंसोल.लॉग(यह, "रेंडर") रिटर्न ( 
 
नमूना प्रतिक्रिया आवेदन
 <इनपुट नाम ="इनपुट" onChange={this.handleChange } value={this.state.input} type="text" प्लेसहोल्डर="यहां टाइप करें..."/> <इनपुट टाइप="सबमिट" /> 
); } 

 यदि हम एप्लिकेशन को लोड करते समय कंसोल पर एक नज़र डालते हैं, तो हम देखेंगे कि "यह" कीवर्ड ऐप को संदर्भित करता है। यदि हम अपने इनपुट का उपयोग करने का प्रयास करते हैं, तो हमें स्क्रीन पर एक त्रुटि मिलती है, लेकिन यदि हम कंसोल को देखते हैं, तो हम देखेंगे कि "यह" कीवर्ड विंडो ऑब्जेक्ट को संदर्भित करता है, ऐप को नहीं। इस समस्या को ठीक करने के दो तरीके हैं:
 <एच4>1. बाइंड द मेथड 

 कंस्ट्रक्टर के अंदर, स्टेट ऑब्जेक्ट के बाद, इस लाइन को इनपुट करें:
 
 this.handleChange =this.handleChange.bind(this);
 

 यह लाइन "इस" कीवर्ड को हैंडल चेंज विधि से बांध देगी ताकि यह हैंडल चेंज को लागू करते समय ऐप घटक को स्पष्ट रूप से संदर्भित कर सके। अन्यथा, विधि उस घटक को नहीं जानती या देखती नहीं है जिसके साथ आप काम करना चाहते हैं।
 <एच4>2. ES6 एरो फंक्शन 

 बड़े तीर फ़ंक्शन के लिए ES6 सिंटैक्स का उपयोग करें। यह स्वचालित रूप से "इस" कीवर्ड को उस विधि से बांधता है, इसलिए आपको इसे कंस्ट्रक्टर में बांधने की आवश्यकता नहीं है:
 
 
हैंडल चेंज =(ई) => {this.setState({[e.target.name]:e.target.value})}
 

 ये लो! प्रतिक्रिया में वर्ग घटक संरचना का उपयोग करते समय आप "this.setState" से "अपरिभाषित" या "फ़ंक्शन नहीं" त्रुटि से कैसे छुटकारा पाते हैं। यदि आप भविष्य में इन त्रुटियों को रोकना चाहते हैं, तो अपने रिएक्ट घटक को इसके बजाय रिएक्ट हुक के साथ कार्यात्मक घटकों का उपयोग करने के लिए पुन:सक्रिय करें! 
 

 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
 

 बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।