El comportamiento mediante el cual los datos originales se actualizan después de mutar donde se copian los datos radica en la distinción entre Tipos de Value Types de Reference Types , que son las dos categorías amplias en las que se incluyen todos los tipos de datos en JavaScript. Para los tipos de valor, significa que un valor es simplemente un valor y no el valor recuperado al apuntar a una posición en la memoria. Sin embargo, los tipos de referencia son aquellos tipos de datos cuyo valor no se almacena directamente, sino que lo que se almacena es una referencia a un punto en la memoria, y el valor de esos tipos se recupera cada vez apuntando al punto en la memoria para obtener la información más actualizada. valor almacenado allí.

Eso nos lleva a cómo copiar valores de tipos de referencia de manera intencional, y esos son Copia de Value Copy de Reference Copy . Al hacer una copia de valor, significa que el valor almacenado en la memoria de los datos originales se copia en otro punto de la memoria, mientras que una copia de referencia significa que la copia de los datos originales se realiza simplemente apuntando una nueva variable al mismo lugar. en la memoria donde apuntan los datos originales en la memoria. La implicación de cualquiera de los enfoques es que, en el caso de la copia de valor, la modificación de los datos copiados de valor no mutará los datos originales; en el caso de la copia de referencia, sin embargo, la modificación de los datos copiados de referencia mutará los datos originales, ya que eso mutar los datos almacenados en la misma ubicación de memoria a la que apuntan tanto los datos originales como los datos copiados por referencia.

La parte más complicada es cuando tiene tipos de referencia almacenados dentro de tipos de referencia, como es el caso del parámetro de datos que su código muestra que tiene una propiedad de sección, cuyo valor es un Array (un tipo de referencia), que es una colección de objetos de elementos, cada uno de los cuales es un objeto (también un tipo de referencia). El truco aquí es que aunque se sabe que el método Array.prototype.map es una función pura que hace una copia de valor de la matriz sobre la que está operando; que es la section en su caso, sin embargo, solo hará una copia de valor de la matriz y se preocupa menos por hacer una copia de valor de los elementos dentro de la matriz, que es lo que causó que la mutación de esos elementos terminara mutando los datos originales que pasó como un argumento en la función eventualmente.

Por lo tanto, la forma de resolver eso es hacer una copia de valor profunda de sus argumentos antes de operarlos dentro de su función una vez que sean tipos de referencia, y hacer una copia de valor de sus elementos secundarios que también son tipos de referencia.

El siguiente enfoque es uno de los muchos enfoques que pueden lograrlo:

 const pureMassageData = (data) => { let dataCopy = { ...data }; // Make a value copy of other reference props as is done for sections and then items within section as below dataCopy.sections = dataCopy.sections.map(item => ({ ...item })); return { title: dataCopy?.label, sections: dataCopy?.sections?.map((item) => { if (item.display === "HR") { const tableBody = [{ id: "new" }]; item["tableData"] = tableBody; } return item; }), } }