React Hook useEffect 缺少依赖项。包括它们或删除依赖数组

Question

我正在制作一个 React 应用程序，但我收到了这个警告。我正在尝试在组件挂载时进行两次 API 调用：

useEffect(() => {
  getWebsites();
  loadUserRatings();
}, []);

这就是我有一个空数组的原因，因为我只想在组件安装时调用它一次。但我仍然收到警告，我该如何解决？

这两个函数通过 react redux 中的 connect 传递给组件，整个组件如下所示：

const Wrapper = (props) => {
  const { getWebsites, loadUserRatings } = props;

  useEffect(() => {
    getWebsites();
    loadUserRatings();
  }, []);

  return (
    <>
      <Header />
      <Websites />
      <Sync />
    </>
  );
};

Answer 1

TL;DR

您应该将getWebsites、loadUserRatings 添加到依赖项数组中。

useEffect(() => {
  getWebsites();
  loadUserRatings();
}, [getWebsites, loadUserRatings]);

React 要求您将变量（其值可能更改）添加到依赖数组，以便回调可以使用这些变量的更新值。

---

您可能会遇到useEffect 的回调运行次数超出预期的问题。考虑下面的例子：

const Bla = (props) => {
 const foo = () => {
  console.log('foo')
 }

 useEffect(() => {
  foo();
 }, [foo])
 
 return <span>bla</span>
}

由于foo 在useEffect 的回调中使用，它被添加到依赖项中。但是每次组件Bla 呈现时，都会创建一个新函数并且foo 会发生变化。这将触发useEffect 的回调。

这可以使用钩子useCallback修复：

const foo = useCallback(() => {
  console.log('foo');
}, []);

现在，当Bla 重新渲染时，仍会创建一个新函数，但useCallback 将确保foo 不会更改（记忆），这有助于防止useEffect 的回调再次运行。

注意：如果foo 中使用的变量随时间变化，则应将它们添加到useCallback 的依赖项数组中，以便函数使用更新后的值。

Answer 2

你必须将getWebsites和loadUserRatings添加到useEffect的依赖中：

useEffect(() => {
  getWebsites();
  loadUserRatings();
}, [getWebsites, loadUserRatings]

需要添加在useEffect 钩子之外定义的所有变量，并规定它们是在组件主体或自定义钩子中定义的，从中调用useEffect() 或从参数向下传递。在组件或自定义挂钩之外定义的变量不需要添加到依赖项列表中。 (memoization) 它是鲜为人知的rules of hooks 之一。

---

注意：（这不适用于您的场景，因为您的函数是通过 props 传递的）您还可以将您的函数包装在 useCallback 钩子中，或者在 useEffect 钩子中定义您需要的变量，如果您不想将其添加到 useEffect 挂钩的依赖项中。

Answer 3

根据我的经验，像这样通过props 传递未记忆的函数并不常见。

// don't do this

<Wrapper
  getWebsites={() => fetchJson('websites').then(setWebsites)}
  loadUserRatings={() => fetchJson('ratings').then(setUserRatings)}
/>

如果它们被正确记忆（使用像useCallback() 这样的钩子，或者通过在任何组件之外定义），那么可以安全地将它们传递给useEffect() 的deps，而不会产生任何行为差异。这是一个修复上述情况的示例。*

// do this

const fetchJson = (...args) => fetch(...args).then(res => res.json());

const Parent = () => {
  const [websites, setWebsites] = useState([]);
  const [userRatings, setUserRatings] = useState({});

  // useCallback creates a memoized reference
  const getWebsites = useCallback(
    () => fetchJson('websites').then(setWebsites),
    [setWebsites]
  );
  const loadUserRatings = useCallback(
    () => fetchJson('ratings').then(setUserRatings),
    [setUserRatings]
  );

  ...

  <Wrapper
    getWebsites={getWebsites}
    loadUserRatings={loadUserRatings}
  />

* _{useState() 在其返回值中存储调度函数，因此从技术上讲，将[] 作为deps 传递给每个useCallback() 是安全的，但我相信指定调度函数因为依赖项通过明确传达作者的意图有助于提高清晰度，并且传递它们没有任何缺点。}

Ramesh's answer 足以应付这种情况。

---

如果你发现你被第一个场景卡住了，那么，作为最后的手段，你可以像这样将props初始化为你的组件的状态。

const Wrapper = (props) => {
  const [{ getWebsites, loadUserRatings }] = useState(props);

  useEffect(() => {
    getWebsites();
    loadUserRatings();
  }, [getWebsites, loadUserRatings]);

  return (
    <>
      <Header />
      <Websites />
      <Sync />
    </>
  );
};