Verwenden SetTimeout nach setState reagieren in Asynchron-Ausgabe

Question

vermeiden ich oft diese

this.setState({ 
something: this.state.something + 1 
}) 

setTimeout(() => { this.props.somefunction(this.state.something) },100); 

Ist das auch richtig? aber das hat zumindest mein Problem gelöst. Wenn ich hier kein Timeout mache, wird somefunction, das in meiner Elternkomponente deklariert ist, einen undefinierten Parameter erhalten. Ich denke, this.props.somefunction() wird ausgeführt, bevor setState getan wird?

Answer 1

Nein, das ist kein gutes Muster. Async-Funktionen sollten einen Callback-Parameter haben, den Sie verwenden können, und mit Blick auf die docs gibt es einen.

Machen Sie Ihre Funktion zum zweiten Parameter setState.

this.setState({...},() => { 
    this.props.somefunction(this.state.something); 
} 

Der Grund setTimeout hier mit schlecht ist, liegt daran, dass Sie eine Chance einnehmen. Sie sagen: "Ich weiß nicht, wie lange diese asynchrone Operation dauern wird, aber ich erwarte nicht, dass es länger als 100 ms dauert, also werde ich eine Chance nutzen." Aber Sie wissen natürlich nicht, wie lange es dauern wird.

Der Parameter callback stellt sicher, dass die Funktion ausgeführt wird, nachdem die asynchrone Operation abgeschlossen wurde, so dass Sie nicht die Daumen drücken müssen.

Answer 2

Die Verwendung von setTimeout zum Ausführen von Aktionen auf Aktion ist in der Regel eine schlechte Übung, und die Entwickler von Facebook haben das definitiv berücksichtigt. Aus diesem Grund haben sie eine Callback-Methode als zweites Argument für setState.

setState({ something: newState },() => { 
    // Run dependant actions here 
}) 

Answer 3

Die official documentation empfiehlt, dass Sie Ihre „Callback-Logik“ setzen innerhalb componentDidUpdate() anstelle des Sekunden-Parameter von setState().

Der zweite Parameter zu setState() ist eine optionale Rückruffunktion , die ausgeführt wird, sobald setState abgeschlossen ist und die Komponente neu gerendert. Im Allgemeinen empfehlen wir, stattdessen componentDidUpdate() für solche Logik zu verwenden.

Hier ist ein Beispiel dafür, wie dies zu tun:

this.setState({ 
    something: this.state.something + 1 
}) 

componentDidUpdate(prevProps, prevState) { 
    if (this.state.something !== prevState.something) { 
    this.props.somefunction(this.state.something); // the state of something has changed -> execute callback function 
    } 
}