this.setState() funktioniert nicht in componentWillReceiveProps

Question

Ich habe eine Login-Seite, in der ich componentWillReceiveProps verwende, um auf die nächste Seite zu gelangen. Aber die state, die ich innerhalb componentWillReceiveProps setze, scheint nicht zu setzen.

Das ist mein componentWillReceiveProps Methode:

componentWillReceiveProps(nextProps) { 
     if (nextProps.isAuthenticated === true) { 
      browserHistory.push('/home'); 
     } else { 
     console.log("this.props :::" + JSON.stringify(this.props)) 
      console.log("this.state :::" + JSON.stringify(this.state)) 
      console.log("nextProps :::" + JSON.stringify(nextProps)) 
      this.setState({ 
       errorMessage: nextProps.authenticationError 
      }) 
      console.log("this.state :::" + JSON.stringify(this.state)) 
     } 
    } 

Die console output ich immer bin, ist dies:

this.props :::{"authenticationError":null} 
this.state :::{"username":"35135","password":"3135","errorMessage":""} 
nextProps :::{"isAuthenticated":false,"authenticationError":"Could not find user in DB."} 
this.state :::{"username":"35135","password":"3135","errorMessage":""} 

hier auch nach dem Zustand zu versetzen, hat sich mein Zustand nicht verändert.

Bitte sagen Sie mir, was ich falsch mache.

EDIT: Ich habe diese Komponente, die ErrorText ist, die die errroMessage Eigenschaft übernimmt.

<ErrorText errorMsg={this.state.errorMessage}></ErrorText> 

Answer 1

setState() is an asynchronous operation, so dass es nicht sofort wirksam nehmen:

setState()Enqueues Änderungen an den Komponentenstatus und Tells Reagieren, dass diese Komponente und ihre Kinder mit der neu gerendert werden müssen, Aktualisierter Status [...]

Denken Sie an setState() als eine Anforderung und nicht als unmittelbarer Befehl, um die Komponente zu aktualisieren. Für eine bessere wahrgenommene Leistung verzögert React die Aktualisierung und aktualisiert dann mehrere Komponenten in einem einzigen Durchgang. React garantiert nicht, dass die Statusänderungen sofort angewendet werden.

setState() aktualisiert die Komponente nicht immer sofort. Es kann das Update bis später verzögern oder verzögern. Dies macht das Lesen this.state direkt nach dem Aufruf setState() eine potenzielle Falle. Verwenden Sie stattdessen componentDidUpdate oder einen setState Rückruf, von denen [...] garantiert werden, dass sie nach dem Update ausgelöst werden.

Hier ist ein Beispiel eines setState Rückruf in Ihrem Kontext:

this.setState(
    { errorMessage: nextProps.authenticationError }, 
    function() { 
     console.log('this.state ::: ' + JSON.stringify(this.state)); 
    } 
); 

Answer 2

Siehe gleiche Stackoverflow Frage:

Why Calling react setState method doesnt mutate the state immediately

setState() nicht sofort diese mutieren. state aber erstellt einen ausstehenden Statusübergang. Der Zugriff auf this.state nach dem Aufruf dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben. Es gibt keine Garantie von synchronen Betrieb von Anrufen zu setState und Anrufe können für Leistungssteigerungen gebündelt werden.

Answer 3

Dies liegt wahrscheinlich daran, dass this.setState eine asynchrone Funktion ist. Sie können einen Callback übergeben, um Ereignisse zu behandeln, die direkt nach dem Setzen des Status passieren sollten. Checkout this gewählte Antwort für ein Codebeispiel.