Lo que estoy tratando de hacer : quiero agregar todos los elementos a mi matriz
Resultado real : mi matriz se está sobrescribiendo
Como se ve en my codesandbox, la salida debería ser helloworld , pero solo muestra world .
Padre.js
import "./styles.css"; import { useState } from "react"; import Child from "./Child"; export default function Parent() { const [arr, setArr] = useState([]); return ( <div className="App"> <Child setArr={setArr} /> {arr} </div> ); }Niño.js
import { useEffect } from "react"; export default function Child(props) { useEffect(() => { props.setArr("hello"); props.setArr("world"); }); return ( <div className="Child"> <h1>This is child componemnt</h1> </div> ); }Este es mi enlace de codesandbox
Sobrescribe su matriz con una cadena, el truco es crear una copia superficial de su valor y mutar la nueva copia. y luego establecer el estado después:
import "./styles.css"; import { useState } from "react"; import Child from "./Child"; export default function Parent() { const [arr, setArr] = useState([]); return ( <div className="App"> <Child setArr={setArr} arr={arr} /> {arr} </div> ); } import { useEffect } from "react"; export default function Child(props) { useEffect(() => { const nextArr = [...props.arr]; nextArr.push("hello", "world"); props.setArr(nextArr); }, []); return ( <div className="Child"> <h1>This is child componemnt</h1> </div> ); }