He clonado una matriz y tengo una función onChange . Al llamar a la función onChange , mi matriz original y clonada se actualiza de acuerdo con el valor onChange actualizado. Pero no quiero actualizar mi matriz clonada. Cómo puedo hacer esto ?
Mi código -
const clonedArray = [...originalArray]; const onChange = (id:number, value: string): void => { const arrayData = originalArray; const selectedData = arrayData.find( (data) => data.myId === id ); if (selectedData) { // updating my originalArray according to new changed value; } } esta función onChange también está actualizando mi clonedArray . No quiero actualizar mi clonedArray . Cómo puedo hacer esto ? ¿Cuál es la solución useMemo o algo así? ¿Alguien puede decirme la solución para ello?
Este problema es una mutación de matriz/objeto de estado. Está mutando elementos en una matriz y viendo las mutaciones manifestarse en una "copia".
En primer lugar, const clonedArray = [...originalArray]; es solo una copia superficial de originalArray , no un clon. Esto significa que, aparte de la referencia de la matriz en sí, todos los elementos de clonedArray siguen haciendo referencia a los mismos elementos de originalArray .
En segundo lugar, si luego realiza cambios en originalArray y los ve manifestarse en clonedArray , definitivamente está mutando las referencias de los elementos en lugar de crear nuevas referencias.
Está buscando el patrón de actualización inmutable. Al actualizar el estado en React, es necesario realizar una copia superficial no solo del objeto/matriz raíz que se está actualizando, sino también de todos los estados anidados. Para ayudar con el esfuerzo, especialmente al actualizar arreglos, también querrá usar actualizaciones de estado funcional para que pueda actualizar correctamente desde el estado anterior.
Para esto, asumo (basado en un comentario que originalArray estaba en estado) que su estado se parece a esto:
const [originalArray, setOriginalArray] = useState([]);El controlador de cambios/actualización de estado ( solo un ejemplo, ya que no conozco sus requisitos de actualización exactos )
const onChange = (id: number, value: string): void => { const selectedData = originalArray.find((data) => data.myId === id); if (selectedData) { // updating my originalArray according to new changed value // Array.prototype.map shallow copies the array into a new array reference setOriginalArray(originalArray => originalArray.map(data => data.myId === id ? { // <-- updating element into new object reference ...data, // <-- shallow copy previous data element property: value // <-- update property with new value } : data // <-- not updating, pass previous object through ); } }Una vez que esté actualizando correctamente los elementos de la matriz, no se producirán mutaciones en nada que también pueda estar haciendo referencia al estado.
puede usar useMemo con una matriz de dependencia vacía. cada vez que originalArray se actualiza, clonedArray no cambia.
import { useMemo, useState } from "react"; const arr = [1,2,3] export default function App() { const [originalArray, setOriginalArray] = useState(arr) const clonedArray = useMemo(() => originalArray, []) return ( <div className="App" style={{textAlign:'center'}}> originalArray: {originalArray} <br/> clonedArray:{clonedArray} <br/> <button onClick={() => setOriginalArray([1])}>update original</button> </div> );}