状态变量未使用反应钩子更新答案

【问题标题】：State variable is not getting updated using react hook状态变量未使用反应钩子更新
【发布时间】：2020-01-16 23:16:40
【问题描述】：

我正在学习 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);
    })
  };

【问题讨论】：

设置状态是异步的。
谢谢亚历克斯。它部分回答了我的问题。由于我没有使用类组件，如何解决这个问题？
基于 setState 的类和来自 useState 挂钩的 setWhateverState 在这种方式下是相同的。它们触发渲染，并且该渲染将具有更新的值。就这么简单。
是的，我知道它们会触发渲染，但由于它们本质上是异步的，所以我的父回调在 setState 方法之前执行。根据我的理解，他们在父调用之后触发渲染，这就是为什么父没有最新的成分。
对不起，我关闭了这个，我现在看到你的问题。一旦我可以重新打开问题，我会回复的。

标签： reactjs callback react-hooks use-state

【解决方案1】：

问题在于userIngredients 是一个在组件渲染时创建的变量，设置为该组件渲染时的状态版本。当您启动一个异步操作（如 fetch）时，您传递给该操作的回调将绑定该回调创建时的值。

这里的修复非常简单。在您计算新成分的地方，只需在返回要存储在状态中的值之前执行您需要的任何回调。

类似：

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
  })
})

【讨论】：