Paso una matriz del padre, en el hijo lo recibo a través de un accesorio y lo paso al estado. Después de eso, necesito agregar un campo a la matriz, lo hago en useEffect. Pero tan pronto como esto pasa, los datos también cambian en el padre. ¿Por qué está pasando esto?
Padre:
<IncomeDrawer values={selectRowData}/>Niño:
const [values, setValues] = useState(props.values); useEffect(() => { let newData = values.docSubs; function updateTreeTable(data) { for (let i = 0; i < data.length; i++) { data[i] = { ...data[i], recordIndex: recordIndex }; recordIndex++; if (data[i].hasOwnProperty('children')) { updateTreeTable(data[i].children); } } }; updateTreeTable(newData); setValues({ ...values, docSubs: newData }) }, [])Creo que la solución podría ser usar el operador de propagación así:
const [values, setValues] = useState([...props.values]);Como señaló Khabir , el problema está en la referencia de accesorios.
PD Lo siento, no comenté, pero no tengo la reputación necesaria.
Cuando pasa accesorios a su child component , pasa la reference . por lo tanto, si cambia el valor en child component que proviene del elemento parent , cambiará tanto en el componente child and parent .
Para evitar esto, debe clone el props value en su child component antes de cambiarlo.
En React, en realidad en JavaScript , hay muchas formas de clone objeto/matriz
Usando la función de corte
const [values, setValues] = useState(props.values.slice());Uso del operador de propagación
const [values, setValues] = useState([...props.values]);Usando la función JSON.parse y JSON.stringify
const [values, setValues] = useState(JSON.parse(JSON.stringify(props.values));Hay algunas otras formas de clonar su matriz. lo