2016-03-24 10 views
1

Gegeben:Ist SetState eine Queue-Datenstruktur?

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

Ist setState eine Warteschlange Datenstruktur (FIFO)? Mit anderen Worten, ist der obige Code sicher, dass runMeAfterAllStateUpdatesComplete unter allen Umständen zuletzt läuft? Oder muß ich den Code als eine Reihe von Rückrufen schreiben:

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

oder alternativ und unter der Annahme idempotence:

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

Might Blick in die 'componentDidUpdate' Haken wert sein. Dies wird unmittelbar nach dem Übergeben der Aktualisierungen an DOM aufgerufen. Dies könnte ein besseres Zuhause für 'runMeAfterAllStateUpdatesComplete()' sein – lux

Antwort

0

Der erste Code ist definitiv nicht sicher: setState ist ein asynchroner Betrieb.
Nachdem die erste setState aufgerufen wird, wird reagieren irgendwann wieder rendern. Also keine Möglichkeit zu sagen, ob und wann die zweite setState feuern wird. Das gleiche Problem mit dem dritten Code-Snippet, weil es auch mehrere setState in einer Reihe hat.

Die zweite Version wird wahrscheinlich funktionieren, aber ich würde davon abraten, einen anderen setState innerhalb des Rückrufs auf diese Weise zu tun.

Wie in Kommentar vorgeschlagen, eine mehr reagieren Wege Staaten Kette ist wahrscheinlich so etwas wie folgt aus:

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