Reactのthis.propsでTypeErrorが起こる場合

this.propsでエラーが起こる

Reactで、Classに定義されたfunction()内でthis.propsとかくと以下のエラーが出る場合があります。

Uncaught TypeError: Cannot read property 'props' of null

これはfunction()内でのthisが、classのことを指していないことが原因。

例えば、下のようにクラス内に定義したメソッドを呼び出そうとしてもエラーで失敗します。

class SampleClass extends Component {
  render() {
    return (
      <section>
          <Button
            onClick={function(){
              //このthisはSampleClassじゃない
              this.handleClick() //ここでエラー
            }}
          >
            ボタン
          </Button>
      </section>
    )
  }

  handleClick() {
    //このthisはSampleClass
    this.setState({
      name: 'dog'
    })
  }
}

この場合、handleClick()の中のthisはSampleClassを指していますが、onClickに指定しているfunction()の中のthisはSampleClassを指していないため、thisが見つからないと言ってエラーになります。

対処法1 bind(this)を使う

これを回避するためには、定義したfunction()の最後にbind(this)を付けます。

<Button
  onClick={function(){
    this.handleClick()
  }.bind(this)}
>

これでthisがfunction()にバインドされて使えるようになります。

対処法2 アロー関数を使う

もしくは、ES6のアロー関数を使います。こちらの方がシンプルに書けるのでおすすめです。

アロー関数については下記なんかを参照してください。

ES6の新機能「Arrow Function」を使って、よりシンプルなコードを書こう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、フロントエンドの店長です。 今回は、ES6の新機能「Arrow Function」についてご紹介します。 Arrow

liginc.co.jp

この場合下のように書きます。

<Button
  onClick={() => {
    this.handleClick()
  }}
>

こちらの方がかなりシンプルに書けます。thisのことはほとんど気にせず書けるので私はすべてこの書き方をしています。

ES6のアロー関数はかなり便利なので使っていきたいですね。