Dado el siguiente código:
Espero que staticData no cambie cuando gridData lo hace.
import { useState } from "react"; import "./styles.css"; const CheckData = (props) => { return ( <> <h1>Data From {props.ds}</h1> {props.items.map((row) => ( <div key={row.recordid}>{row.companyname}</div> ))} </> ); }; export default function App() { const [gridData, setGridData] = useState([ {recordid: 1,companyname: "Devshare"}, {recordid: 2,companyname: "Shufflebeat"}, {recordid: 3,companyname: "Mita"} ]); const staticData = [...gridData]; const changeValue = () => { let nd = gridData; nd[2]["companyname"] = "Superman"; setGridData([...nd]); }; return ( <div className="App"> <CheckData ds="gridData" items={gridData} /> <CheckData ds="staticData" items={staticData} /> <button style={{ marginTop: "50px" }} onClick={changeValue}> Change a value in gridData </button> </div> ); }¿Por qué el valor en staticData cambia cuando gridData lo hace? Pensé que hice una copia del objeto, no crear una instancia.
Basado en un comentario sobre la pregunta:
Se supone que staticData es una tabla de "historial" que permite a los usuarios deshacer cosas.
Entonces lo estás construyendo en el lugar equivocado. Cuando haces esto en el componente:
const staticData = [...gridData]; Luego , en cada representación , reconstruye staticData en función de los valores actuales en gridData . Entonces, cuando el estado de gridData se actualiza y el componente se vuelve a renderizar, crea un nuevo staticData con los nuevos valores.
Si se supone que staticData son datos codificados que no cambian, defínalos fuera del componente:
const staticData = [ {recordid: 1,companyname: "Devshare"}, {recordid: 2,companyname: "Shufflebeat"}, {recordid: 3,companyname: "Mita"} ]; Y luego, dentro del componente, utilícelo como el valor de estado inicial para gridData :
export default function App() { const [gridData, setGridData] = useState(staticData); //... }; De esa manera, staticData solo se define una vez en el módulo. gridData se puede actualizar en el estado tantas veces como desee, pero eso no afectará a staticData .