Question

我有一个表对象的回调函数，该表对象正在调试一些数据，并希望在用this.setState（）更新该表对象之前进行console.log记录。现在，我知道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值。

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打印更新后的控制台日志

1 个答案: