javascript - 如何根据 props 更新 React 组件状态

Question

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

我一直在使用这个方法：

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

控制台显示 nextProps 是已定义的值，但 this.state.key 仍未定义。

谢谢！

Answer 1

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

您应该执行以下操作：

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

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