Esta función se agrega a un clic de botón.
const listChangeHandler = (e) => { e.preventDefault(); setIngredientList((prevArray) => [...prevArray, ingredient]); inputIngredient.current.value = ""; props.data(ingredientList); };El problema es: el estado recibido (ingredientList) que obtengo en la composición principal es el anterior, no el último que se muestra en el componente secundario
¿Por qué y cuál podría ser la solución?
Es por este hecho que el state siempre se actualiza después de volver a renderizar, por lo que cuando lo pasa al componente superior, ¡todavía tiene su valor anterior! Para solucionar este problema tienes dos soluciones:
const listChangeHandler = (e) => { e.preventDefault(); let temp = [...ingredientList, ingredient]; setIngredientList(temp); inputIngredient.current.value = ""; props.data(temp); };useRef en lugar de useState porque, a diferencia de state , ref se actualiza inmediatamente.