javascript - 如何将 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) 时，它记录为 []，而不是 [{...}，{...}]。

标签： javascriptreactjsreact-hooks

Answer 1

状态更新可能是异步的，因此无法保证设置后立即访问。

官方文档

对于 useState 钩子也是如此。设置状态不会立即更新状态。相反，它将更新操作排入队列。

所以你需要有第二个使用 Heroes 依赖的 useEffect。

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

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

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

示例代码框