如何將 Heroes 數組更改為 res 數組？ 我正在使用 react useState 鈎子。 這適用於以前的項目，但不適用於這里

Question

const [Heroes, setHeroes] = useState([])

    useEffect(() => {
        API.findFavorites().then((res) => {
            console.log(res)
            setHeroes([...Heroes, res]);
            console.log(Heroes)
        })
    }, []);

我正在嘗試將 Heroes 的狀態設置為 res，以便我可以在 useEffect 中使用它。 但它沒有設置，我在網上嘗試了很多不同的解決方案，但都沒有奏效！ API.findFavorites 返回一個類似於 [{...}, {...}] 的響應。 當我 console.log(Heroes) 它記錄為 []，而不是 [{...}, {...}]。

Answer 1

狀態更新可能是異步的，因此不能保證您可以在設置后立即訪問它。

官方文檔

這也適用於 useState 鈎子。 設置狀態不會立即更新狀態。 相反，它會將更新操作排入隊列。

所以你需要有第二個 useEffect 和 Heroes 依賴。

  const [Heroes, setHeroes] = useState([]);

  useEffect(() => {
    API.findFavorites().then(res => {
      console.log(res);
      setHeroes([...Heroes, res]);   
    });
  }, []);

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

示例代碼和框