我有一个登录页面,其中使用componentWillReceiveProps
路由到下一页。但是我在state
中设置的componentWillReceiveProps
似乎没有设置。
这是我的componentWillReceiveProps
方法:
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
是这样的: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":""}
即使在设置状态后,我的状态也没有改变。
请告诉我我做错了什么。
编辑:我有这个组件
ErrorText
,它具有errroMessage
属性。<ErrorText errorMsg={this.state.errorMessage}></ErrorText>
最佳答案
setState()
is an asynchronous operation,因此不会立即生效:
这是您上下文中的setState
回调的示例:
this.setState(
{ errorMessage: nextProps.authenticationError },
function() {
console.log( 'this.state ::: ' + JSON.stringify( this.state ) );
}
);