ReactJS：this.setStateはすぐにその効果がありますか？

Question

this.setStateがすぐに状態を変更するかどうかはわかりません。この例では

class Example extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    switch: false 
    }; 
    this.switch = this.switch.bind(this); 
} 

clickCoverSwitch(){ 
    console.log("Before clicking - ", this.state.switch); 
    this.setState({switch: !this.state.switch}); 
    console.log("Now, the state is - ", this.state.switch); 
} 

render() { 
    return (
     <input onClick={this.clickCoverSwitch} defaultChecked={this.state.coverSwitch} type="checkbox"> 
     </input> 
    ); 
} 

....のチェックボックスがあると仮定してみましょう、説明するために

、チェックボックスはデフォルトでオフになって - OKです。

ただし、スイッチ（チェックボックス）をクリックすると、コンソールに次のメッセージが表示されます。

Before clicking - false

Now, the state is - false

this.state.switchがthis.setState({switch: !this.state.switch})によって変更されている必要があるため、2番目のラインは、trueを表示するようになっています。

私はこれをどのように解釈するべきかわかりません。 アドバイスをいただければ幸いです！

Answer 1

setState（）は直ちにthis.stateを変更しませんが、保留状態の遷移を作成します。このメソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。複数の保留状態の変更がある場合

this.setState((prevState) => ({ switch: !prevState.switch})); 

この方法で、彼らはお互いを上書き習慣：以前の状態に基づいて状態は、この構文を使用するために、その優れた値を変更することは

//This way leads to undesirable results 
Somefunction() { 
    this.setState({ counter: this.state.counter + 3}) 
    this.setState({ counter: this.state.counter + 5}) 
} 
//this.state.counter === 5 here 

betterfunction() { 
    this.setState((prevState) => ({ counter: prevState.counter + 3})) 
    this.setState((prevState) => ({ counter: prevState.counter + 5})) 
} 
//The second setState will change based on the first one's values instead of overwritting them 
//this.state.counter === 8 here 

詳細情報：https://facebook.github.io/react/docs/react-component.html#setstate

Answer 2

これは依存しています... ReactのsetStateは、syncでもasyncでもよいでしょう。コンテキストの問題をトリガする - これに関する詳細topic here

一般規則 - setStateは同期している必要はありません。状態が伝搬するときに操作を実行する必要がある場合は、setState補完コールバック（2番目のパラメータはsetStateに渡されます）を使用します。