useEffect 首次打破 useState 数组答案

【问题标题】：useEffect break array of useState at first timeuseEffect 首次打破 useState 数组
【发布时间】：2020-12-11 23:27:20
【问题描述】：

我正在学习反应钩子。我有模拟数据 js 调用“MockFireBase.js”如下：

const userIngredientsList = [];
export const Get = () => {
    return userIngredientsList;
}
export const Post = (ingredient) => {
    ingredient.id = userIngredientsList.length + 1;
    userIngredientsList.push(ingredient);
    return ingredient;
}

然后我的反应钩子组件“Ingredients.js”将调用这个模拟实用程序，详细信息如下：

const Ingredients = () => {
  const [userIngredients, setUserIngredients] = useState([]);
  
  // only load one time
  useEffect(() => { setUserIngredients(Get()); }, []);
  
  const addIngredienHandler = ingredient => {
    let responsData = Post(ingredient);
    setUserIngredients(preIngredients => {
      return [...preIngredients, responsData]
    });
  }
  
  return (
    <div className="App">
      <IngredientForm onAddIngredient={addIngredienHandler} />
      <section>
        <IngredientList ingredients={userIngredients} />
      </section>
    </div>
  );
  )
}

当我添加第一个成分时，它添加了两个（当然我在 console.log 中遇到了相同的关键问题）。然后我添加了第二种成分就可以了。

如果我删除下面的 useEffect 代码，它会很好用。

// only load one time
useEffect(() => { setUserIngredients(loadedIngredients); }, []);

如果我使用 useEffect，我想知道我在上面做错了什么

【问题讨论】：

变量userIngredientsList 将作为引用传递。因此，在addIngredienHandler 中，Post() 函数将其直接添加到原始变量userIngredientsList 中，而setState 参数preIngredients 仍在使用原始引用（通过帖子添加了该项目）。使用效果应该散布数组setUserIngredients([...Get()])。

标签： javascript reactjs react-hooks use-effect use-state

【解决方案1】：

问题不在于useEffect。这是关于改变一个全局 userIngredientsList 数组。

在 useEffect 中，您将初始组件状态设置为 userIngredientsList。
然后在addIngredienHandler 中调用Post()。这个函数做了两件事： 2a。将新成分推送到全局 userIngredientsList 数组`。由于它与您在步骤 1 中保存的状态中的实例相同，因此您的状态现在已经包含此成分。 2a。返回此成分
然后，addIngredienHandler 再次将此成分添加到状态中 - 因此您最终会在状态中添加两次。

修复 1 从 Post 函数中删除 userIngredientsList.push(ingredient); 行。

修复 2 或者，如果您需要此全局成分列表以供进一步使用，则应确保不要将其直接存储在组件状态中，而是在您的状态中创建一个浅表副本：

useEffect(() => { setUserIngredients([...Get()]); }, []);

【讨论】：