-1

I am trying to clone the object props.messages.serverError; I tried the following three methods individually:

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

After cloning the object I set the original object to null then log the cloned object a as follows:

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

serverError is also null instead of the original value even though it is now supposed to occupy a memory address different from the original object due to the cloning.

Smarticles101
  • 1,822
  • 1
  • 14
  • 28
koque
  • 1,830
  • 5
  • 28
  • 49
  • 1
    because 1 and 2 those are not deep clones. Unclear how 3 would have the same problem. Maybe you should be showing the actual code so we can see what you are doing. – epascarello Jan 21 '20 at 17:48
  • 1
    @espascarello the 3rd method using Json.parse is a deep clone, but even with the shallow clones it should be creating a new memory address as to not modify the original object – Smarticles101 Jan 21 '20 at 17:49
  • 2
    It isn't modifying the original object. The only way that console log could emit null is if the input object was null before cloning. –  Jan 21 '20 at 17:50
  • There's also a syntax error on 3. The closing bracket after `props.messages.serverError` should be removed. – Smarticles101 Jan 21 '20 at 17:54
  • Does this answer your question? [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) – mukesh210 Jan 21 '20 at 17:55
  • 1
    @koque it might be helpful to have a minimal, complete, and reproducible example that replicates the problem. Those 3 clones should work fine – Smarticles101 Jan 21 '20 at 17:58
  • 2
    @Smarticles101 Protip: you can use `[mre]` to generate a link to [mre]. –  Jan 21 '20 at 17:58
  • I double-cloned the object and it seemed to work: The answer is provided below. – koque Jan 21 '20 at 18:00
  • @koque I think you need to update the question with a reproduceable example, otherwise this question is just noise. – Ben Aston Jan 21 '20 at 18:08

2 Answers2

0

I am surprise how you can set the value for props? Props are read-only. You are changing that value directly without any interaction of react maybe that's why it is changing the actual value. You can try something like this.

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);
Muhammad Zeeshan
  • 4,608
  • 4
  • 15
  • 41
-1

I double-cloned the object and it seemed to work:

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

Here serverError now has the original value.

koque
  • 1,830
  • 5
  • 28
  • 49
  • 2
    This doesn't answer the question in your question's title. "Why doesn't this work as expected?" –  Jan 21 '20 at 18:02