this.setState 直到函数调用两次才更新状态

Question

我有一个功能，当我按下按钮时，我会接收数据[对象数组]。我遍历这个数组以找到其中一个对象以将其存储在状态中。

当我第一次单击按钮时，控制台日志显示状态未更新，但当我再次单击时，它显示状态已更新：

  constructor(props) {
    super(props);
    this.state = {
      listOfItems: [],
      isOpen: false,
      modal: null,
    }
  }
  findKey(key) {
    console.log(key);
    console.log(this.state.listOfItems);
    let foo;
    for (var i in this.state.listOfItems) {
      if (this.state.listOfItems[i].id == key) {
        foo = this.state.listOfItems[i];
        this.setState({ modal: foo });
      }
    }
 // the first time i call the func it returns null- the second time the obj
    console.log(this.state.modal)
  }

为什么会这样？

谢谢！

Answer 1

React 中的setState 函数并没有改变this.state 属性，它实际上是在等待你的函数执行完成然后触发组件的重新渲染（修改状态并再次调用渲染函数)。

这意味着为了访问您的新值，您可以使用 render 函数，或者您可以实现接受旧状态作为第二个参数的 componentDidUpdate 函数（紧跟在前一个 props 参数之后）并且可以使用this.state访问新状态。

这使您可以创建更“纯”的代码，这就是 React 以这种方式实现 setState 的原因。