जब आप पहली बार React कंपोनेंट्स लिखना शुरू करते हैं, तो आप रास्ते में कई अलग-अलग त्रुटियों का सामना कर सकते हैं। दो ऐसी त्रुटियां हैं "Cannot read property 'setState' of undefined" और "this.setState is not a function"। यह आर्टिकल इन त्रुटियों को दूर करने के कुछ तरीकों पर नज़र डालता है।

क्यों?

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

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
  }

  handleChange(e) {
    this.setState({[e.target.name]: e.target.value})
  }

  render() {
    console.log(this.state)
    return (
      

        
Sample React Application
        
        
      
    );
  }
}

export default App;

पहली नज़र में, कोड ठीक दिखता है, लेकिन अगर हम करीब से देखें, तो हम देखते हैं कि handleChange मेथड App क्लास से बाउंड नहीं है इसलिए "this" कीवर्ड इस इंस्टेंस में Window को संदर्भित करेगा। करीब से देखने के लिए, आइए handleChange मेथड की पहली लाइन और फिर render की पहली लाइन में console.log(this) जोड़ें:

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

render() {
  console.log(this, "render")
  return (
    

      
Sample React Application
      
      
    
  );
}

यदि हम एप्लिकेशन लोड होने पर कंसोल को देखते हैं, तो हम देखेंगे कि "this" कीवर्ड App को संदर्भित करता है। यदि हम अपने इनपुट का उपयोग करने का प्रयास करते हैं, तो हमें स्क्रीन पर एक त्रुटि मिलती है, लेकिन यदि हम कंसोल को देखते हैं, तो हम देखेंगे कि "this" कीवर्ड वहां Window ऑब्जेक्ट को संदर्भित करता है, App को नहीं। इस समस्या को ठीक करने के दो तरीके हैं:

1. मेथड को बाइंड करें

कंस्ट्रक्टर के अंदर, स्टेट ऑब्जेक्ट के बाद, यह लाइन डालें:

this.handleChange = this.handleChange.bind(this);

यह लाइन "this" कीवर्ड को handleChange मेथड से बांध देगी ताकि यह handleChange को इनवोक करते समय App कंपोनेंट को स्पष्ट रूप से संदर्भित कर सके। अन्यथा, मेथड उस कंपोनेंट को नहीं जानता या नहीं देखता जिसके साथ आप चाहते हैं कि यह काम करे।

2. ES6 एरो फंक्शन

बिग एरो फंक्शन के लिए ES6 सिंटैक्स का उपयोग करें। यह स्वचालित रूप से "this" कीवर्ड को उस मेथड से बांध देता है ताकि आपको इसे कंस्ट्रक्टर में बांधने की आवश्यकता न हो:

handleChange = (e) => {
  this.setState({[e.target.name]: e.target.value})
}

बस! React में क्लास कंपोनेंट स्ट्रक्चर का उपयोग करते समय "this.setState" is "undefined" या "not a function" त्रुटि से छुटकारा पाने का तरीका यही है। यदि आप भविष्य में इन त्रुटियों को रोकना चाहते हैं, तो अपने React कंपोनेंट को React Hooks के साथ फंक्शनल कंपोनेंट्स का उपयोग करने के लिए रीफैक्टर करें!