setState 打印更新后的控制台日志 [重复]答案

【问题标题】：Console log before setState prints post update [duplicate]setState 打印更新后的控制台日志 [重复]
【发布时间】：2020-03-17 17:42:12
【问题描述】：

我有一个来自表对象的回调函数，我正在调试一些数据并希望在使用 this.setState() 更新表对象之前对其进行控制台记录。现在，我知道 this.setState 是异步的，但我仍然希望看到更新前的日志，但它却显示在更新后。

这里是回调函数：

onCellChange = (tableId, rowIdx, cellIdx) => e => {
    const value = parseFloat(e.target.value);
    console.log("TableID:", tableId);
    console.log(tableData); //This prints the tableData object post-this.setState()
    const tableTuple = { rowIdx, cellIdx, value, tableData, tableId };

    this.setState({
      tableData: updateInput(tableTuple)
    });
};

为了测试这一点，我注释掉了 this.setState 调用并再次尝试，console.log() 将按预期打印更新前的值，因为它不再进入 updateInput 方法。这是有道理的，但是我不确定如何获取更新前的 console.log 值。

【问题讨论】：

updateInput 可能会改变对象。控制台引用一个对象并反映它收到的任何修改。
总结一下； 1. 不要在 updateInput 函数中改变状态和 2. 控制台记录 json 而不是对象：console.log(JSON.stringify(tableData))
我看不到tableData对象的值是什么时候设置的。你不应该写 console.log(this.state.tableData) 吗？
关于改变状态，这里是why you shouldn't do it or be careful when updating the state to avoid accidental mutation。
@EmileBergeron 那么，将状态对象作为参数传递仍然会修改原始状态吗？我认为它只会修改参数本身而不是原始参数。否则，如果没有 this.setState，我会看到反映的更改，但是，当我将其注释掉时，我看不到状态更新。

标签： javascript reactjs console.log setstate

【解决方案1】：

在浏览器上，console.log 允许您以交互方式检查打印出来的对象。它通过保持对给定对象的引用来做到这一点，并且当该引用的值发生更改时，控制台将反映这些更新，即使在过去的日志中也是如此。

因此，您的控制台会在 tableData 发生变异后向您显示它的状态。（感谢 Emile Bergeron 澄清这一点）。

您可以通过记录对象的克隆来避免这种情况，如下所示：

const tableDataCopy = { ...tableData };
console.log(tableDataCopy);

或者，如果你不能使用 ES6，或者你需要一个真正的深拷贝，你可以这样做

const tableDataCopy = JSON.parse(JSON.stringify(tableData));
console.log(tableDataCopy);

【讨论】：

并不慢，甚至在控制台界面中解释了对象在展开时进行求值。
有趣...所以，如果我的理解正确，chrome 中的控制台输出可以在已经显示之后更改？我从来不知道...
我习惯登录到终端，因为我经常使用节点，在那种情况下当然是不可能的
我不确定它是否可以在评估后更改，但它说 “左侧的对象值在记录时被快照，下面的值刚刚被评估。”，这里是 @ 987654321@
另请注意，一旦展开，Chrome 似乎做了浅拷贝，因此不再反映更改。