componentWillReceiveProps

componentWillReceiveProps

我有一个登录页面,其中使用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 ) );
    }
);

10-06 00:15