Wie kann ich sicherstellen, dass ein reactjs-Status aktualisiert wird, und dann eine Funktion aufrufen?

Question

Ich versuche reactjs zu verwenden, um einen Status zu aktualisieren, und wenn es aktualisiert ist, feuere einen Ajax-Aufruf, der eine neue Seite anfordert. Kurz bevor der Ajax-Aufruf ausgelöst wird, wird eine Offset-Variable gesetzt: var offset = this.state.npp * this.state.page; Ich finde jedoch, nachdem clickNextPage() ausgelöst wurde, wird der Wert von this.state.page nicht aktualisiert.

Ich verstehe im Grunde nicht, was hier passiert, das scheint eine Race Condition zu sein, weil ich die Zustandsänderung auf meiner render() Funktion mit {this.state.page} beobachte.

Wie kann ich sicherstellen, dass meine this.state.page aktualisiert wird und fireByName() ausgelöst wird?

clickNextPage: function(event){ 
    console.log("clicked happend") 
    page = this.state.page; 
    console.log(page) 
    page += 1 
    console.log(page) 
    this.setState({page: page}); 
    console.log(this.state.page) 
    this.findByName() 
    }, 

JS Console:

clicked happend 
0 
1 
0 

Answer 1

setState ist asynchron, dass this.state wird nicht sofort aktualisiert werden. Die kurze Antwort auf Ihr Dilemma ist die Verwendung des Rückrufs (der zweite Parameter zu setState), der aufgerufen wird, nachdem der interne Status aktualisiert wurde. Zum Beispiel

this.setState({page: page}, function stateUpdateComplete() { 
    console.log(this.state.page) 
    this.findByName(); 
}.bind(this)); 

Die längere Antwort ist, dass Sie nach setState aufrufen, werden drei Funktionen aufgerufen (siehe hier, um weitere Informationen zu dem einzelnen https://facebook.github.io/react/docs/component-specs.html):

• shouldComponentUpdate das Ihnen die vorherigen und neuen zu inspizieren erlaubt Status, um festzustellen, ob die Komponente sich selbst aktualisieren soll. Wenn Sie false zurück, sind folgende Funktionen nicht ausgeführt (obwohl die this.state noch innerhalb Ihrer Komponente aktualisiert werden)
• componentWillUpdate das gibt Ihnen die Möglichkeit, beliebigen Code auszuführen, bevor der neue Zustand gesetzt wird intern und Rendering geschieht
• render Dies passiert zwischen den Komponenten "will" und "did".
• componentDidUpdate das gibt Ihnen die Möglichkeit, beliebigen Code auszuführen, nachdem der neue Zustand gesetzt ist und die Komponente neu gerendert selbst

Answer 2

Wenn this.setState der neue Zustand Aufruf nicht direkt gesetzt, Reaktion bringt es in einem wartenden Zustand, die durch this.state Aufruf kann den alten Zustand zurückzukehren.

Dies liegt daran, dass React Ihre Statusaktualisierungen möglicherweise stapelweise verarbeitet und daher keine Garantie dafür bietet, dass this.setState synchron ist.

Was Sie tun möchten, ist this.findByName() innerhalb componentDidUpdate, componentWillUpdate oder durch den Rückruf als zweites Argument zu this.setState je nach Anwendungsfall angeboten genannt. Beachten Sie, dass der Rückruf an this.setState erst ausgelöst wird, nachdem Ihr Aufruf übergeben wurde und die Komponente neu gerendert wurde.

Außerdem könnten Sie in Ihrem Fall eine Funktion tun this.setState anstelle einer variablen Tanz um die Lesbarkeit zu erhöhen.

this.setState(function (prevState, currentProps) { 
    return {page: prevState.page + 1} 
}, this.findByName);