Question

我有一个登录页面，我使用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>

Answer 1

setState() is an asynchronous operation，因此它不会立即生效：

setState() 排队对组件状态的更改，并告诉React该组件及其子组件需要使用更新后的状态重新呈现[...]

将setState()视为请求，而不是立即更新组件的命令。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证立即应用状态更改。

setState()并不总是立即更新组件。它可以批量推迟更新或推迟更新。这会在调用this.state潜在陷阱后立即阅读setState()。相反，请使用componentDidUpdate或setState回调[...]，其中任何一个都可以保证在应用更新后触发。

以下是您上下文中setState回调的示例：

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

Answer 2

请参阅相同的stackoverflow问题：

Why Calling react setState method doesnt mutate the state immediately

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

Answer 3

这很可能是因为this.setState是一个异步函数。您可以传递回调来处理在设置状态后应该直接发生的事件。结帐this为代码示例选择了答案。

this.setState（）在componentWillReceiveProps中不起作用

3 个答案: