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

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

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

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

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

未経験、異業種からIT業界に転身。フロントエンジニア。主にJavascript(React.js)をつかったWEBアプリ開発にたずさわる。
お問い合わせ、ご相談など → genpsp10@gmail.com

psp7をフォロー
プログラミング
スポンサーリンク
シェアする
psp7をフォロー

コメント