从React Hook复制数组
提问于 2019-12-29 20:40:45
我使用useState钩子来填充数组中的项。
const [meals, setMeals] = useState([]);
useEffect(async () =>{
const mealsData = await fetchMeals(localStorage.getItem('user_id'));
console.log(mealsData);// Array(3)
setMeals([...meals, mealsData]);
console.log(meals);//[]
}, []);这个数组在我的setMeals方法中没有拷贝，我在这里做错了什么？
回答 4
Stack Overflow用户
发布于 2019-12-29 20:46:18
这是因为
setMeals([...meals, mealsData]);是一个异步调用，并且在确定状态实际更新之前记录了meals。
console.log(meals);您应该在另一个useEffect()调用中调用和检查console.log()函数，该调用在每次状态更改时运行，并确保状态确实发生了更改
useEffect(() => {
console.log(meals);
}, [meals]);作为第二个参数传递的[meals]将让这个useEffect()在每次meals (实际上)更新时运行。
Stack Overflow用户
发布于 2019-12-29 20:48:10
更新是异步的，新值并不像您期望的那样立即可用。你可以在这里找到更深入的解释：useState set method not reflecting change immediately
Stack Overflow用户
发布于 2019-12-29 20:52:25
UseEffect不能是异步的，您应该将其包装在异步函数中
function useMeals() {
const [meals, setMeals] = useState([]);
useEffect(() => {
async function setFetchedMeals() {
const mealsData = await fetchMeals(localStorage.getItem('user_id'));
setMeals([...meals, mealsData]);
}
setFetchedMeals();
}, []); // letting the dependency array empty will run the effect only once
console.log(meals)
return meals;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59523094
复制相关文章
腾讯云开发者
