Переменная состояния не обновляется с помощью реагирующего хука - PullRequest
0 голосов
/ 17 января 2020

Я изучаю ReactJS и пытаюсь обновить родительский реквизит обновленным состоянием ингредиентов из дочернего компонента. Вызывается setUserIngredients, и обновленные ингредиенты передаются родителю.

Код:

const [userIngredients, setUserIngredients] = useState([]);

const removeIngredientHandler = id => {
    setLoading(true);
    fetch(`https://***************.com/ingredients/${id}.json`,{
      method:'DELETE'
    }).then(response=>{
      setLoading(false);
      setUserIngredients(prevIngredients => 
        prevIngredients.filter(ingredient =>{
          return (ingredient.id !== id)
           //return  ingredient;
        })
      );
      **props.ingredients(userIngredients);**
      //userIngredients is still having old value 
      //need to check on this
    }).catch(error => {
      setError(error.message);
    })
  };

1 Ответ

0 голосов
/ 17 января 2020

Проблема в том, что userIngredients - это переменная, которая создается при рендеринге компонента, и устанавливается в версию для состояния, когда этот рендеринг компонента. И когда вы запускаете асинхронную операцию (например, выборку), обратный вызов, который вы передаете этой операции, будет привязан к значениям с момента создания этого обратного вызова.

Исправление здесь довольно простое. Там, где вы рассчитываете свои новые ингредиенты, просто выполните любой обратный вызов, прежде чем возвращать значение, которое будет сохранено в состоянии.

Что-то вроде:

fetch(`https://***************.com/ingredients/${id}.json`, {
  method: 'DELETE',
}).then(response => {
  setLoading(false)
  setUserIngredients(prevIngredients => {
    // Figure out the new ingredients
    const newIngredients = prevIngredients.filter(ingredient => ingredient.id !== id)

    // Call your callback with the new ingredients
    props.ingredients(newIngredients)

    // Return the new ingredients to be stored in your state
    return newIngredients
  })
})
...