ReactでsetStateが「Cannot read property ‘setState’ of undefined」

作業メモ

ReactでStateの状態を変更しようとsetStateを呼び出す。

TypeError: Cannot read property 'setState' of undefined

エラーが出た、setStateが存在しないなんてありえない。

エラーの出たコード

class App extends Component {
  constructor() {
    super();
    this.state = {
      btnState: false
    };
  }

  handleClick() {
    this.setState({
      btnState: !this.state.btnState
    });
  }

  render() {
    return(
      <div>
      <p>{this.state.btnState ? "true" : "false"}</p>
      <button onClick={this.handleClick}>BTN</button>
      </div>
    );
  }
}

handleClick()のthis.setStateでundefinedが発生。

thisが参照できていないみたい。

原因

継承を使いClassで定義したReactコンポーネントはthisがバインドされない仕様のようだ。

メソッド内でthisを使用するには2つ方法があるようだ。

解決方法

bindする

  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      btnState: false
    };
  }

bindでthisをメソッドに渡す。

アロー関数

handleClick = () => {
    this.setState({
      btnState: !this.state.btnState
    });
  }

メソッドをアロー演算子で定義する。

まとめ

そういえばES2015で追加されたアロー関数でthisがなんやかんやってあったな。

ちゃんと調べておこうかな。