Console.log 打印后基于用户输入的更改

【问题标题】：Console.log Changes based on user input after being printedConsole.log 打印后基于用户输入的更改
【发布时间】：2021-12-28 11:03:48
【问题描述】：

我在打开带有两个 console.log 的页面进行调试时调用了这个传奇。这给了我两个应该相似的日志。 data[0] 中的值用于 AgGrid 表。表中有两个字段是可编辑的，这些字段在网络调用中为空。但是，如果我在浏览器中编辑字段，则在展开 console.log 之前，该值现在显示为我在字段中输入的任何内容。这将发生在任一日志上，因此它可以先将该字段记录为 null，然后再记录一个值。

function* saga({ Id }) {
    try {
        const response = yield call(get, GET_DATA(Id));
        console.log(response.data[0]);
        console.log(response.data[0]);
        yield put(fetchDataSuccess(response.data));
    } catch (error) {
        yield put(displayErrorMessage(NOB.ERROR));
    }
}

如果引用发生了变化，console.log 是否应该能够在打印后发生变化？这会在一定程度上降低调试的效率。

【问题讨论】：

标签： javascript reactjs console.log

【解决方案1】：

console.log() 实际上是异步的，如果您输出的值是一个在您调用console.log() 后不久发生变化的对象，那么实际输出的很可能是更新后的版本。

所以，简短回答你的问题，是的。

如果你需要在变化的时候输出，有两种比较简单的方法可以在那个阶段输出。

第一个是简单地输出一个克隆。你可以像这样创建一个浅克隆：

const objectToOutput;
console.log({ ...objectToOutput });

如果您需要深度克隆，可以拉入库或编写自己的方法。

第二个选项是先将其转换为 JSON。如果需要，您甚至可以将该 JSON 转换回对象并输出。适用于包含简单数据的复杂对象（就像您从 API 调用中获取的数据）：

const objectToOutput;
console.log(JSON.stringify(objectToOutput, null, 2));
// or
console.log(JSON.parse(JSON.stringify(objectToOutput)));

【讨论】：