如何根据props更新反应组件状态

Question

当道具发生变化时，如何强制反应组件更新状态？

我一直在使用这个方法：

componentWillReceiveProps(nextProps){
    this.setState({key:nextProps}); 
    console.log(this.state);
  }

控制台告诉我nextProps是定义的值，但this.state.key仍未定义。

谢谢！

Answer 1

控制台日志this.state显示未定义，因为setState是异步的。因此，当您执行setState时，它不会立即更新状态，这也是控制台日志不显示更新状态的原因。

您应该执行以下操作：

componentWillReceiveProps(nextProps){
    this.setState({key:nextProps}, () => {
        console.log(this.state);
    }); 
 }

当setState发生时，将调用定义为第二个参数的回调，然后我们更新状态。