React Hooks useCallback 和 useEffect 导致反应应用程序中的无限循环

Question

import axios from "axios";
import { useEffect, useState, useCallback } from "react";
export default function App() {
  const [user, setUser] = useState([]);
  const getUser = useCallback(async () => {
    let { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    setUser(data);
  }, [user]);

  useEffect(() => {
    getUser();
  }, [getUser]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

（我可以从 useEffect 依赖项中删除 getUser 并删除 useCallback ，这将完美地工作）但我想尝试将 getUser 置于 useEffect 依赖项中，同时需要将 getUser 包装在 useCallback 中。 在 useCallback 依赖项中，我将 setUser 设置为可以正常工作，但如果将用户设置为 useCallback 依赖项，则会出现无限循环。 为什么与 setUser 的行为不同。

Answer 1

如果getUser更改，效果将运行：

useEffect(() => {
  //...
}, [getUser]);

如果user更改， getUser将更改：

const getUser = useCallback(async () => {
  //...
}, [user]);

并getUser更改user ：

setUser(data);

所以当组件渲染时，执行效果，调用getUser ，更新user ，改变getUser ，触发效果，调用getUser等等。

getUser的useCallback不依赖于user ，只依赖于setUser 。 更改其依赖数组以反映：

const getUser = useCallback(async () => {
  //...
}, [setUser]);

setUser不会改变，所以getUser不会改变，所以效果不会被重新调用。