Блог

Эта функция добавляется при нажатии кнопки.

   const listChangeHandler = (e) => {
    e.preventDefault();
    setIngredientList((prevArray) => [...prevArray, ingredient]);
    inputIngredient.current.value = "";

    props.data(ingredientList);
  };
 

Проблема в том, что полученное состояние (список ингредиентов), которое я получаю в родительском компоненте, является предыдущим, а не последним, показанным в дочернем компоненте

Почему и что может быть обходным путем?

Это связано с тем, что state он всегда обновляется после повторной настройки, поэтому, когда вы передаете его в верхний компонент, он все еще имеет свое предыдущее значение! Чтобы решить эту проблему, у вас есть два решения:

1. обновите свой код следующим образом:

 const listChangeHandler = (e) => {
    e.preventDefault();
    let temp = [...ingredientList, ingredient];
    setIngredientList(temp);
    inputIngredient.current.value = "";

    props.data(temp);
  };
 

2. используйте useRef вместо useState «потому что», в отличие от state , ref обновляет мгновенно.