如何解决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,我在上面做错了什么
解决方法
该问题不在useEffect中。这是关于更改全局userIngredientsList
数组。
- 通过useEffect将初始组件状态设置为
userIngredientsList
。 - 然后在
addIngredienHandler
内致电Post()
。此功能有两件事: 2a。将新成分推入全局userIngredientsList
数组`。由于它与您在步骤1中保存在状态中的实例相同,因此您的状态现在已经包含此成分。 2a。返回此成分 - 然后,
addIngredienHandler
再次将此成分添加到状态中-因此您最终两次将其置于状态中。
修复1
从userIngredientsList.push(ingredient);
函数中删除Post
行。
修复2 或者,如果您需要此成分的全局列表以备将来使用,则应确保不要将其直接存储在组件状态中,而应在您的状态中创建浅表副本:
useEffect(() => { setUserIngredients([...Get()]); },[]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。