Javascript 反应延迟我的状态更新1次迭代

以下是更新状态的函数：

    GroupByHandler = (index) =>
        {
            const temporary = [...this.state.header.groupByHeader];
    
    
            if(this.state.header.groupByHeader.includes(this.props.Headers[index]))
            {
                temporary.splice(index,1);
                // console.log("[PivotTable.js]: if statement under GroupByHandler");
                // console.log(this.props.Headers[index]);
            }
            else
            {
                temporary.push(this.props.Headers[index]);
                // console.log("[PivotTable.js]: else statement under GroupByHandler");
                // console.log(this.props.Headers[index]);
                // console.log(temporary);
            }
            this.setState({
                header: {
                    ...this.state.header,
                    groupByHeader: temporary
                }
            });
            console.log("[PivotTable.js]: ");
            console.log(temporary);
            console.log(this.state.header.groupByHeader);
            console.log("Temporary: ");
            console.log(temporary);
        }

我的控制台输出如下图所示：

[PivotTable.js]：

PivotTable.js:43[“广告商”]

PivotTable.js:44[]

PivotTable.js:45临时数据透视表：

PivotTable.js:46[“广告商”]

我的状态是这样的：

    state = {
            header: {
                ActiveHeaderIndex: this.props.ActiveIndex,
                isHeaderAscending: true,
                groupByHeader: []
            }
}

---

谁能帮我调试一下我哪里出了问题？我按照

setState

的方法是不是正确<代码>临时已更新，但由于某些原因，

设置状态

未更新。

设置状态正在异步工作。如果要在

设置状态

工作后立即获得更新状态，则需要使用如下回调。试试看

this.setState(
{
  header: {
    ...this.state.header,
    groupByHeader: temporary
  }
},
() => console.log(this.state.header.groupByHeader)
);

下面是一个简单的例子

---

setState正在异步工作如果您想在

setState

工作后立即获得更新状态，则需要使用如下回调。试试看

this.setState(
{
  header: {
    ...this.state.header,
    groupByHeader: temporary
  }
},
() => console.log(this.state.header.groupByHeader)
);

下面是一个简单的例子

你能这样试试吗

 this.setState(
      Object.assign(this.state.header, { groupByHeader: temporary })
    );

你能这样试试吗

 this.setState(
      Object.assign(this.state.header, { groupByHeader: temporary })
    );

---

哦，哇！我明白你的意思。。。非常感谢你。因此，如果我只添加

（）=>{}

，这会使整个函数异步工作吗？或者是否有其他最佳实践可以做到这一点？非常感谢你的回答！我不确定是否有关于这方面的最佳做法。这就是react医生的建议。但您可以查看此页面了解更多信息；你可能也想看看react hooks。噢，哇！我明白你的意思。。。非常感谢你。因此，如果我只添加

（）=>{}

，这会使整个函数异步工作吗？或者是否有其他最佳实践可以做到这一点？非常感谢你的回答！我不确定是否有关于这方面的最佳做法。这就是react医生的建议。但您可以查看此页面了解更多信息；你可能也想看看react hooks。嗯，这也很有效。我只是想知道为什么前一个版本会造成延迟，你是如何通过这个新的编辑来改进它的？嗯，这也很有效。我只是想知道为什么前一个版本会造成延迟，你是如何用这个新版本来改进它的？