React中，報錯"Cannot read property 'setState' of undefined"時，如何處理

 

 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}>點擊</button>
      </div>
    );
  }
}

export default App;

 

咱們把num初始值經過構造函數constructor保存在this.state裏，以後咱們給button按鈕一個點擊事件handleClick,

而後經過點擊button按鈕來更新num的初始值，當咱們點擊的時候，毫無疑問報錯了「Cannot read property 'setState' of undefined」，

翻譯意思是：‘沒法讀取未定義的屬性'setState'’，他的意思就是告訴咱們，當咱們點擊的時候，並無讀取到setState中的值，也就是說：

handleClick方法中的this與組件中的this不一致，不是同一個this。

碰到這個問題有兩種解決方法：這兩種方法的目的就是要保證：handleClick方法中的this與組件中的this要保持一致，這樣才能讀取到setState中的值來改變num，

第一種方法： 

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);   //把組件中的this綁定到handleClick方法中，這樣就會保持this一致          
    };
    handleClick(){
        this.setState({
            num: this.state.num + 1
        })
    };
  render() {
    return (
      <div className="App">
       {this.state.num}
             <button onClick={this.handleClick}>點擊</button>

            <button onClick={this.handleClick.bind(this)}>點擊</button> //把上面的寫到這裏也是能夠的
      </div>
    );
  }
}

export default App;

 

第二中方法：

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 = () => { //利用箭頭函數
        this.setState({
            num: this.state.num + 1
        })
    };
  render() {
    return (
      <div className="App">
       {this.state.num}
             <button onClick={this.handleClick}>點擊</button>

            <button onClick={（）=> {this.handleClick()}>點擊</button>或 <button onClick={() => this.handleClick()}>點擊</button>
      </div>
    );
  }
}

export default App;

 

在 React 裏面，要將類的原型方法經過 props 傳給子組件，傳統寫法須要 bind(this)，不然方法執行時 this 會找不到：

<button onClick={this.handleClick.bind(this)}></button>

或者

<button onClick={() => this.handleClick()}></button>