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

Question

如何在 props 更改时强制 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 发生时，定义为第二个参数的回调被调用，然后我们更新了状态。