为什么我尝试克隆对象没有按预期工作？答案

【问题标题】：Why is my attempt to clone an object not working as expected?为什么我尝试克隆对象没有按预期工作？
【发布时间】：2020-01-21 17:38:40
【问题描述】：

我正在尝试克隆对象 props.messages.serverError;我分别尝试了以下三种方法：

 1. let serverError= {...props.messages.serverError};
 2. let serverError = Object.assign({}, props.messages.serverError);
 3. let serverError= JSON.parse(JSON.stringify(props.messages.serverError}));

克隆对象后，我将原始对象设置为 null，然后将克隆的对象 a 记录如下：

props.messages.serverError = null;
console.log('serverError', serverError)

serverError 也是 null 而不是原始值，即使它现在由于克隆而应该占用与原始对象不同的内存地址。

【问题讨论】：

因为 1 和 2 不是深度克隆。不清楚 3 怎么会有同样的问题。也许你应该展示实际的代码，这样我们就可以看到你在做什么。
@espascarello 使用 Json.parse 的第三种方法是深度克隆，但即使使用浅克隆，它也应该创建一个新的内存地址，以免修改原始对象
它没有修改原始对象。控制台日志发出 null 的唯一方法是输入对象在克隆之前为 null。
@koque 有一个最小、完整且可重现的示例来复制问题可能会有所帮助。这 3 个克隆应该可以正常工作
@Smarticles101 Protip：您可以使用[mre]生成指向minimal reproducible example的链接。

标签： javascript reactjs jsx

【解决方案1】：

我很惊讶您如何设置props 的值？ Props 是只读的。您正在直接更改该值，而无需 react 的任何交互，也许这就是它更改实际值的原因。你可以试试这样的。

let props = {
  messages: {
    serverError: 404
  }
}

let serverError = { ...props.messages };
console.log("Initial Value", serverError.serverError);

props.messages.serverError = 500;
console.log("After Update: (Props)", props.messages.serverError);
console.log("After Update:", serverError.serverError);

【讨论】：

【解决方案2】：

我双重克隆了该对象，它似乎可以工作：

let originalError = {...props.messages.serverError};
let serverError = {...originalError};
originalError = null;
props.messages.serverError = null;
console.log('serverError', serverError)

这里的 serverError 现在具有原始值。

【讨论】：

这不会回答您问题标题中的问题。 “为什么这没有按预期工作？”