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

Question

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

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