This.setState () does not work in the WillReceiveProps component

Question

I have a login page in which I use componentWillReceiveProps to go to the next page. But the state that I set inside componentWillReceiveProps does not seem to be set.

This is my componentWillReceiveProps method:

  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)) } } 

console output I get this:

 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":""} 

Here, even after setting the state, my state has not changed.

Please tell me what I'm doing wrong.

EDIT: I have this component, which is ErrorText , which accepts the errroMessage property.

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

Answer 1

setState() is an asynchronous operation , so it does not take effect immediately:

setState() enqueues changes the state of a component and tells React that this component and its children should be re-mapped with the updated state [...]

Think of setState() as a request, not an immediate command to update a component. For best perceived performance, React can delay it and then update several components in a single pass. The reaction does not guarantee the immediate application of state changes.

setState() does not always immediately update a component. It can restart or delay the update until the next. This makes reading this.state immediately after calling setState() potential trap. Instead, use componentDidUpdate or the callback setState [...], each of which can be run after an update is applied.

Here is an example setState in your context:

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

Answer 2

Refer to the same stack question:

Why does Calling respond to the setState method, does not change state immediately

setState () does not immediately mutate this.state, but creates a pending state transition. Accessing this.state after calling this method can potentially return an existing value. There is no guarantee that synchronized operation of setState calls and calls can be collected to improve performance.

Answer 3

This is most likely because this.setState is an asynchronous function. You can pass a callback to handle events that should occur immediately after setting the state. Checkout this selected answer for sample code.