Manera correcta de clonar objetos/matrices durante setState en React

Luego de mucho luchar pudimos dar con la respuesta de este atascamiento que ciertos de nuestros usuarios de este sitio web han tenido. Si tienes algún detalle que compartir no dejes de compartir tu información.

Solución:

Personalmente, confío en esta estrategia de copia profunda.
JSON.parse(JSON.stringify(object)) en vez de spread operador porque me metió en errores extraños al tratar con objetos anidados o matrices multidimensionales.

spread operador no hace una copia profunda si estoy en lo correcto y dará lugar a mutaciones de estado con ANIDADO objetos en React.

Ejecute el código para obtener una mejor comprensión de lo que está sucediendo entre los dos. Imagina que esa es la variable de estado que mutas usando spread operador.

const obj = Dogs: [name: "Snoopy", name: "Lola", name: "Sprinkles"], Cats: [name: "Felidae", name: "Garfiled", name: "Cat in the Hat"] ;

const newObj = ...obj;
console.log("BEFORE SPREAD COPY MUTATION")

console.log("NEW OBJ: " + newObj.Dogs[0].name); //Snoopy
console.log("OLD OBJ: " + obj.Dogs[0].name); //Snoopy

newObj.Dogs[0].name = "CLONED Snoopy";

console.log("AFTER SPREAD COPY MUTATION")

console.log("NEW OBJ: " + newObj.Dogs[0].name); // CLONED Snoopy
console.log("OLD OBJ: " + obj.Dogs[0].name); // CLONED Snoopy

// Even after using the spread operator the changed on the cloned object are affected to the old object. This happens always in cases of nested objects.

// My personal reliable deep copy

console.log("*********DEEP COPY***********");

console.log("BEFORE DEEP COPY MUTATION")
deepCopyObj = JSON.parse(JSON.stringify(obj));


console.log("NEW OBJ: " + newObj.Dogs[0].name); //CLONED Snoopy
console.log("OLD OBJ: " + obj.Dogs[0].name); // CLONED Snoopy
console.log("DEEP OBJ: " + deepCopyObj.Dogs[0].name); //CLONED Snoopy


deepCopyObj.Dogs[0].name = "DEEP CLONED Snoopy";

console.log("AFTER DEEP COPY MUTATION")
console.log("NEW OBJ: " + newObj.Dogs[0].name); // CLONED Snoopy
console.log("OLD OBJ: " + obj.Dogs[0].name); // CLONED Snoopy
console.log("DEEP OBJ: " + deepCopyObj.Dogs[0].name); // DEEP CLONED Snoopy

Ahora, si desea hacer una copia profunda de su objeto, cambie el controlador a este

handleAddItem(s)       

  var key = Object.keys(s)[0];
  var value = s[key];

  var allItems = JSON.parse(JSON.stringify(this.state.items));

      allItems[key].push(name: value);    

      this.setState(items: allItems);

Quería agregar un poco más de información sobre la clonación de matrices. Puede llamar a slice, proporcionando 0 como primer argumento:

const clone = myArray.slice(0);

El código anterior crea un clon del original. array; tenga en cuenta que si existen objetos en su array, se mantienen las referencias; es decir, el código anterior no hace un clon “profundo” del array contenido.

Comentarios y puntuaciones

---

---

Utiliza Nuestro Buscador