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のアロー関数はかなり便利なので使っていきたいですね。
コメント