React TypeScript callback reading undefined when using setState, but it will log the value-CodePudding

I am writing a react application, and for some reason I can not wrap my head around this issue. Below is a snippet, the only thing that should be needed:

onFirstNameChange(event: any){
    console.log(event.target.value)
    // this.setState({
    //     firstname: event.target.value
    // })
}

The commented out code will not run, it says it can not read properties of undefined. However when I log the events value it does it perfectly. Any ideas on why this is happening? It is an onchange event. It is also deeply nested, however the value does make it back.

CodePudding user response：

As Brian stated, I also believe the error saying that it cannot read property of undefined, is likely saying it cannot read property setState of undefined, because "this" is undefined.

This is most likely caused by providing the onFirstNameChange handler without leveraging a closure, bind, or arrow function to bind the value of this to the "this" value you are expecting.

My guess is your code leveraging the on change handler looks like the following:

<input type="text" value={this.state.value} onChange={this.onFirstNameChange} />

You can refer to the "Handling Events" page (link here) of the React documentation, you will find the following about midway down the article:

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

If calling bind annoys you, there are two ways you can get around this. If you are using the experimental public class fields syntax, you can use class fields to correctly bind callbacks.

SOLUTIONS: I've included examples of the 3 possible solutions below to bind the value of this, depending on your preference:

Option 1 - Assuming this is a class based component, which I am based on the syntax shown, you can bind the method in the constructor:

constructor(props) {
      super(props);
      this.onFirstNameChange.bind(this);
    }

Option 2 - Update method definition to public class fields syntax with an arrow function to bind "this": (See here)

onFirstNameChange = (event: any) => {
    console.log(event.target.value)
    this.setState({
      firstname: event.target.value
    })
};

Option 3 - Update onChange callback with anonymous arrow function to bind this value:

<input type="text" value={this.state.value} onChange={() => this.onFirstNameChange} />

Note on option 3 from React Docs:

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

CodePudding user response：

React components written in an ES6 class, do not autobind this to the component's methods. There are 2 solutions primarily. You may use choose either:

Either explicitly bind `this` in constructor

constructor(props) {
  super(props);

  // rest of code //

  this.state = {
    firstname: '',
  };

  // rest of code //

  this.onFirstNameChange = this.onFirstNameChange.bind(this);
}

Or use ES6 Arrow Function

onFirstNameChange = (event: any) => {
  console.log(event.target.value);

  this.setState({
    firstname: event.target.value
  });
}

Either explicitly bind this in constructor

Or use ES6 Arrow Function

Either explicitly bind `this` in constructor