setState 打印 post 更新前的控制台日志

Question

我有一个来自 table 对象的回调函数，我在其中调试一些数据并希望 console.log table 对象在用 this.setState 更新之前（ ).现在，我知道 this.setState 是异步的，但我仍然希望看到更新前的日志，但它却出现了 post-update.

这里是回调函数：

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 值。

Answer 1

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

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

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

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

或者，如果你不会用ES6，或者你需要一个真正的深拷贝，你可以

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

setState 打印 post 更新前的控制台日志

Console log before setState prints post update

javascript

reactjs

console.log

setstate