IT二刀流にはプロモーションが含まれています。

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

reactアイキャッチ

作業メモ

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
    });
  }

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

まとめ

  • 継承してClass定義したReactコンポーネントはthisがバインドされない
  • bindする
  • アロー関数で定義する

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

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

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

ネットビジョンアカデミー

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集