useEffect第一次中断useState的数组

问题描述

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

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

然后我的react hooks组件“ 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，我在上面做错了什么

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）