React - nullのプロパティ 'setState'を読み取ることができません

Question

私は、スコープの問題を論じている同様のスレッドを認識しています。

次のコンポーネント

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Example extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      counter: 0 
     } 
    } 

    addMore() { 
     this.setState({ 
      counter: this.state.counter + 1 
     }); 
    } 

    render() { 
     return (

      <div onClick={ this.addMore }> 
       <p>counter: { this.state.counter }</p> 
      </div> 

     ); 
    } 
} 

if (document.getElementById('example')) { 
    ReactDOM.render(<Example />, document.getElementById('example')); 
} 

を使用して、あなたはクリックするとdivあなたが得るCannot read property 'setState' of null

私はあなたがthis.addMore.bind(this)のようなものを行うことができます知っていますが、すべてこれはちょうどそれをするために奇妙な余分な定型スタイルのコードを思わ作業。

---

これを行う最もエレガントな方法とは何でしょうか？確かに、人々は目の痛み以外の利点を持つ好む方法を持たなければならないのでしょうか？

Answer 1

正しいthisコンテキストを関数にバインドする必要があります。これを行うには、コンストラクタ関数にthis.addMore = this.addMore.bind(this);を追加します。

constructor(props) { 
    super(props); 

    this.state = { 
     counter: 0 
    } 

    this.addMore = this.addMore.bind(this); 
} 

はES5 React.createClassではすべての機能が自動的に正しい thisに結合させたが、ES6クラスに正しい thisコンテキストが自動的にバインドされていません。 reference

これはコンストラクタでバインドと呼ばれ、これは現在、Reactドキュメントで「アプリケーションのパフォーマンスを向上させる」ためのアプローチです。 reference

Answer 2

addMore =() => { 
    this.setState({ 
    counter: this.state.counter + 1 
    }); 
} 

矢印構文を使う

チェックの詳細については、この偉大なリンクのために結合thisの世話をする、それはクラスのプロパティの提案はおそらくこの http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html