setStateはキューのデータ構造ですか？与えられた

Question

：

this.setState({"data1": ''}); 
    this.setState({"data2": ''}); 
    this.setState({"data3": ''}, this.runMeAfterAllStateUpdatesComplete); 

はsetStateキューデータ構造（FIFO）ですか？言い換えれば、上記のコードは、runMeAfterAllStateUpdatesCompleteがすべての状況で最後に実行されるという点で安全ですか？それとも私がコールバックのシリーズとしてのコードを記述する必要があります：

this.setState({"data1": ''}, this.setNext); 
    setNext(){ 
    this.setState({"data2": ''}, this.setNextNext); 
    } 
    setNextNext() { 
    this.setState({"data3": ''}, this.runMeAfterAllStateUpdatesComplete); 
    } 

または代わりと仮定冪等：

this.setState({"accrualName": ''}, this.runMeAfterAllStateUpdatesComplete); 
this.setState({"accrueRate": ''}, this.runMeAfterAllStateUpdatesComplete); 
this.setState({"hoursPer": ''}, this.runMeAfterAllStateUpdatesComplete); 

Answer 1

最初のコードは間違いなく安全ではありません。setStateは非同期操作です。
最初のsetStateが呼び出された後、reactはある時点で再レンダリングします。だから、もしも第二のsetStateが発射するかどうかを知る方法はない。

3番目のコードスニペットと同じ問題は、複数のsetStateが連続しているためです。

2番目のバージョンが動作する可能性がありますが、このようにコールバック内に別のsetStateを実行することをお勧めします。

コメントで示唆したように、連鎖状態に、より反応する方は、おそらくこのようなものです：

componentDidUpdate() { 
    if (this.state.data3) { 
    this.runMeAfterAllStateUpdatesComplete(); 
    } else if (this.state.data2) { 
    this.setState({ data3 : '' }); 
    } else if (this.state.data1) { 
    this.setState({ data2 : '' });} 
    } 
}