useEffect在第一时间中断useState的数组

Question

我正在学习react hook。我正在进行mock数据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组件"；配料.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

Answer 1

问题未在使用中。这是关于改变一个全局userIngredientsList数组。

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

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

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

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