javascript - 如何将 Heroes 数组更改为 res 数组？我正在使用 react useState Hook 。这在以前的项目中有效，但在这里不起作用

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

状态更新可能是异步的，因此不保证您在设置后可以立即访问。

Official docs

这对于 useState 钩子(Hook)来说也是如此。设置状态不会立即更新状态。相反，它将更新操作排队。

因此，您需要具有 Heroes 依赖项的第二个 useEffect。

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

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

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

Sample codesandbox