从React Hook复制数组

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

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

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