如何基于道具更新React组件状态

Question

每当道具更改时，如何强制React组件更新状态？

我一直在使用该方法：

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发生时，将调用定义为第二个参数的回调，然后更新状态。