Estoy haciendo un proyecto de dieta. Tengo dos entradas con el nombre de la comida y la hora (p. ej., desayuno a las 8 a. m.). Luego tengo un botón que muestra un acordeón con esos valores y otro botón. El Acordeón es un componente de la interfaz de usuario de Material, por lo que para representar un nuevo Acordeón cada vez, pasé el Acordeón como una propiedad del objeto, luego agregué ese obj a una matriz vacía y representé la matriz con el método de mapa.
El botón creado con cada acordeón hace esto:
const [foodList, setFoodList] = useState([]); function addFood() { const food = { id: Math.random(), name: input, amount: amount, }; setFoodList([...foodList, food]); }Y el contenido del acordeón es este:
<Typography> {foodList.map((item) => { return ( <div key={item.id}> <h1>{item.name}</h1> <h2>{item.amount}</h2> </div> ); })} </Typography>Cuando renderizo el acordeón por primera vez, no agrega el objeto de comida a la lista de alimentos. La segunda vez, agrega una vez y luego no más, la tercera vez agrega dos veces y luego no más.
¿Por qué está pasando esto?
Tendrás que usar el gancho useEffect
const [foodList, setFoodList] = useState([]); function addFood() { const food = { id: Math.random(), name: input, amount: amount, }; // Here please consider using the prevState setFoodList(prevState => ([...prevState, food])); } useEffect(() => { // Here your code to be executed when dependency is updated }, [dependency])El "error" que enfrenta generalmente se debe al hecho de que no usa el gancho useEffect.