React 将我的状态更新延迟 1 次迭代

Question

这是更新状态的函数：

    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);

        }

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

[数据透视表.js]：

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

数据透视表.js:44 []

PivotTable.js:45 临时：

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

我的状态是这样的：

    state = {

            header: {

                ActiveHeaderIndex: this.props.ActiveIndex,

                isHeaderAscending: true,

                groupByHeader: []

            }

}

谁能帮我调试我哪里出错了？我遵循的方式setState不正确吗？temporary已更新但setState由于某种原因未更新。

Answer 1

你能这样试试吗 this.setState(        Object.assign(this.state.header, { groupByHeader: temporary })     );

Answer 2

如果您想在setState工作后立即获得更新状态，则 setState 正在异步工作，那么您需要使用如下所示的回调。尝试一下。this.setState({  header: {    ...this.state.header,    groupByHeader: temporary  }},() => console.log(this.state.header.groupByHeader));