Question

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

Answer 1

这是因为

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

是异步调用，您正在记录meals，然后再确定状态是否实际更新

console.log(meals);

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

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

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

Answer 2

更新是异步的，新值不能按预期立即使用。您可以在这里找到详细的解释：useState set method not reflecting change immediately

Answer 3

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;
}

Answer 4

您实际上没有做错任何事情，状态更新不是同步的，因此更新后立即记录@Override public void paint(Graphics g) { for(int i=0;i<50;i++) { g.drawRect(x_coord,y_coord,cellWidth,cellHeight); x_coord =x_coord+cellWidth; } }不会显示更新的值

对meals数组使用效果来检测其实际更改的时间...

meals

从React Hook复制数组

4 个答案: