.bind（this）はsetStateレンダリングの問題を解決するのはなぜですか？

Question

私はreact-modalを使用していますが、その間、アプリケーションのレンダリング中に状態を設定していた問題が発生しました。どのように次のコードは、.bind(this)が付属して大丈夫です：

constructor(props) { 
    super(props); 
    this.state = { 
     open: false 
    } 
} 

openModal() { 
    this.setState({ 
     open: true 
    }) 
} 

render() { 
    return (
     <div> 
      <button onClick={this.openModal.bind(this)}>Open Modal</button> 
      <Modal isOpen={this.state.open}> 
       <h1>I am a modal</h1> 
      </Modal> 
     </div> 
    ) 
} 

が、これではありません。私はsetState(…): Cannot update during an existing state transitionについての警告を受け

... 
<button onClick={this.openModal()}>Open Modal</button> 
... 

、と誰もがそれをするだろう私にこれを説明することができる場合すばらしいです。

Answer 1

onClick={this.openModal}の代わりにonClick={this.openModal()}と書いているときに、レンダリング中に実際に関数を呼び出すと思います（つまり、「状態遷移」）。 この機能は、setStateコールによって状態を変更しています。レンダリング内の状態を変更することは、反パターンです。だからあなたは警告を受ける。

あなたのメソッド内でthisキーワードを使用しているため、コールバックに関しては.bind(this)が必要です。通常、ここでは特にthisがコンポーネントを指していることを望みます。しかし、thisは誰が関数を呼び出しているかに依存しており、そのように渡すと（onClickコールバックのように）、Javascriptは面白いです。それはおそらく呼び出すコンポーネントにはならないでしょう。したがって、thisが正しいものを指していることを確認するには、bindです。