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

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

How to update react component state based on props