调用后 setState 不会更新所有状态属性答案

【问题标题】：setState doesn't update all state properties after call调用后 setState 不会更新所有状态属性
【发布时间】：2019-07-16 14:12:05
【问题描述】：

问题是，我使用 setState 来更新 state.n 和 state.data。我想使用处理程序调用 setState onClick。调用 setState 后，我执行回调 console.log 来观察状态属性的变化，但只有 state.data 发生了变化，而 state.n 没有变化。

handler(e) {
    this.setState((state) => {
        let arr = state.data;
        arr.push(fakeTableData[state.n+1]);
        this.setState({n: state.n+1, data: arr});
    }, console.log.bind(null, this.state.n));
}

使用一个处理程序后，我希望看到 state.n 增加，但我只更改了 state.data，而不是 state.n。我收到一条警告，如下所示：“警告：从更新函数内部安排了更新（setState、replaceState 或 forceUpdate）。更新函数应该是纯函数，副作用为零。考虑使用 componentDidUpdate 或回调。”我已经阅读了主要反应站点上的教程，但没有足够的信息。

【问题讨论】：

最后一行应该是 console.log.bind(this, this.state.n)

标签： javascript reactjs

【解决方案1】：

让我们试试let arr = [...state.data]

【讨论】：

【解决方案2】：

您不应该在设置状态的函数中使用 setState。这就是你出错的原因。相反，您应该返回状态。试试这个：

handler = (e) => {
    this.setState((state) => {
        let arr = state.data;
        arr.push(fakeTableData[state.n+1]);
        return {n: state.n+1, data: arr};
    }, () => { console.log(this.state.n) });
}

【讨论】：

解释为什么应该尝试解决方案。 "Try this" 没有意义
我尝试使用return，在setState中调用setState是我的错，但是我得到了相同的结果，state.n不想被更新。
@user2923317 您的日志在 setState 发生之前已绑定，因此您误解了问题
您可以尝试使用() => {console.log(this.state.n)} 代替console.log.bind(this, this.state.n) 吗？我意识到，如果您使用 console.log 进行绑定，它实际上是指旧状态。我在本地环境中尝试了这段代码，它可以工作。你能从你的组件中粘贴一些更相关的代码吗？
@charlietfl 谢谢，我明白了。 setState 而不是 return 是我的错。