App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            num: 90
        }         
    };
    handleClick(){
        this.setState({
            num: this.state.num + 1
        })
    };
  render() {
    return (
      <div className="App">
       {this.state.num}
             <button onClick={this.handleClick}>click</button>
      </div>
    );
  }
}

export default App;

We save the num initial value in this.state through the constructor, and then we give the button button a click event handleClick.

Then we update the initial value of num by clicking on the button button button. When we click on it, there is no doubt that the "Cannot read property'setState'of undefined" is wrong.

The translation means:'Undefined property'setState'can't be read, which means that when we click, we don't read the value in setState, that is to say:

This in the handleClick method is not the same as this in the component.

There are two solutions to this problem: the purpose of these two methods is to ensure that this in the handleClick method is consistent with this in the component so that the value in setState can be read to change num.

The first method is:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            num: 90
        }

        this.handleClick = this.handleClick.bind(this);   //Binding this in the component to the handleClick method keeps this consistent         
    };
    handleClick(){
        this.setState({
            num: this.state.num + 1
        })
    };
  render() {
    return (
      <div className="App">
       {this.state.num}
             <button onClick={this.handleClick}>click</button>

            <button onClick={this.handleClick.bind(this)}>click</button> //It's also possible to write the above here.
      </div>
    );
  }
}

export default App;

The second method:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            num: 90
        }   
    };

 handleClick(){
        this.setState({
            num: this.state.num + 1
        })
    };
   handleClick = () => { //Using arrow function
        this.setState({
            num: this.state.num + 1
        })
    };
  render() {
    return (
      <div className="App">
       {this.state.num}
             <button onClick={this.handleClick}>click</button>

            <button onClick={()=> {this.handleClick()}>click</button>or <button onClick={() => this.handleClick()}>click</button>
      </div>
    );
  }
}

export default App;