從 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 reflect changes directly

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

您實際上沒有做錯任何事情，狀態更新不是同步的，因此在更新后立即記錄meals不會顯示更新的值

對meals數組使用效果來檢測它何時實際發生了變化......

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