为什么 this.setState() 没有设置我的状态对象？ [复制]答案

【问题标题】：Why is this.setState() not setting my state object? [duplicate]为什么 this.setState() 没有设置我的状态对象？ [复制]
【发布时间】：2021-09-10 12:14:12
【问题描述】：

在这里反应新手，所以请善待。我有一个名为results 的对象，它是一个相当大的对象，包含许多较小的对象。我已经能够确定它在 componentDidMount() 钩子中通过，但是在通过钩子中的代码之后，我发现单独的状态对象的人口与 results 的值相同不工作。

  state = {
    homeDesignNameText: "",
    resultsPrime: {}
  };

  componentDidMount() {
    const {
      results,
    } = this.props;

    console.log(">>MNTR", results);

    if (results &&
      results.status !== 404 &&
      results.items &&
      results.items.length) {

        console.log(">>BEEP");

      if(!this.state.resultsPrime.items) {
        console.log(">>BOOP");

        this.setState({
          resultsPrime: {...results}
        });
        console.log(">>BEEP2", this.state.resultsPrime);
      }
    }
  }

当我运行包含这些内容的页面时，我确实在 console.log() 中得到了 >>MNTR 并带有 results 对象的值。然后我得到>>BEEP 和>>BOOP 出现，但是一旦>>BEEP2 在控制台中出现，唯一出现的是{}。

人们会假设，如果到达>>BOOP，也会进行this.setState() 调用，但事实并非如此。我到底做错了什么，如何解决这个问题以确保this.state.resultsPrime 也包含results 的值？

【问题讨论】：

您应该查看有关“setstate 回调”的文档以了解状态
Setstate 操作是异步的stackoverflow.com/questions/36085726/….

标签： reactjs state

【解决方案1】：

更新后的状态没有得到安慰，因为状态更改是异步的。要获取更新的状态，您可以使用回调将其记录为：

  this.setState({
          resultsPrime: {...results}
        },()=> console.log(">>BEEP2", this.state.resultsPrime));

console.log 只有在 resultsPrime 状态更新后才会执行。您可以阅读有关状态更改回调的更多信息here

【讨论】：