setState in componentWillMount spiegelt nicht in componentWillMount

Question

Ich mache eine AJAX-Anfrage in meiner KomponenteWillMount-Funktion der Reaktionskomponente. Ich habe eine Statusvariable. Ich setze den Zustand dieser Variable als Antwort des Ajax-Aufrufs.

Jetzt in meiner Funktion componentDidMount versuche ich, den Wert von state_variable zu console.log. Idealerweise sollte ich den Wert von state_variable als das bekommen, was ich oben als Antwort gesetzt habe. Aber in der Konsole sehe ich den Wert als leeres Array gedruckt, das der initialisierte Wert von state_variable war.

Warum componentDidMount jetzt in der Lage, den Wert zu erhalten, den ich einstelle? Was mache ich falsch?

Answer 1

Was lässt Sie denken, dass der AJAX-Anruf zu der Zeit abgeschlossen wird, die componentDidMount() läuft? componentWillMount() führt unmittelbar vor dem ersten render() aus, während componentDidMount() sofort nach das erste render() ausführt. Es ist also nicht wirklich genug Zeit für Ihren AJAX-Aufruf, um Ihren Status in der Zeit fertigzustellen und zu aktualisieren, die für die Ausführung des Lebenszyklus benötigt wird.

https://reactjs.org/docs/react-component.html#the-component-lifecycle

Answer 2

Ihre Ajax-Aufrufe leben in der Regel in componentDidMount, nicht componentWillMount. Der Grund dafür ist, dass Sie keinen Aufruf in einer nicht eingebundenen Komponente wünschen und dass Sie davon ausgehen, dass die Daten nicht zurückgegeben werden, bevor die Komponente geladen wird.

Ich bin mir sicher, dass alles läuft, Sie wahrscheinlich nur protokollieren, bevor der Aufruf von ComponentWillMount Ajax zurückgegeben wird. Statt das zu tun, so etwas wie:

$.ajax({ 
    // call parameters go here 
}).then(function(response) { 
    this.setState({ state_variable: response }); 
}) 

now do your logging inside of render instead: 

render() { 
    console.log(this.state.state_variable) 
    // normal render jsx here 
} 

machen wird erneut auszuführen, wenn der setState Anruf abgeschlossen ist, so dass Sie dann ein gutes Protokoll bekommen sollten.

Answer 3

ComponentWillMount soll als äquivalente Lebenszyklusmethode für ComponentDidMount auf dem Server, der gerendert wird, verwendet werden. Es ist nicht gedacht, dass es ein Garntee ist, es wird zuerst fertig sein. Der Reactstil wäre, eine Ladeeigenschaft von Ihrem Async-Aufruf festzulegen und eine Lade-UI zu rendern, bis die Anfrage beendet ist.