javascript - 从 React Hook 复制一个数组

Question

我正在使用 useState Hook 来填充数组中的项目。

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 方法中获取副本，我在这里做错了什么？

Answer 1

这是因为

setMeals([...meals, mealsData]);

是一个异步调用，在确定状态实际更新之前，您正在记录膳食

console.log(meals);

您应该在另一个 useEffect() 调用中调用并检查您的 console.log() 函数，该调用在每次状态更改时运行并确保状态实际更改

useEffect(() => {
    console.log(meals);
 }, [meals]);

[meals] 作为第二个参数传递将使此 useEffect() 在每次 meals(实际上)更新时运行。