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

由于您很可能不会在运行时修改您的函数定义，因此您可以将getWebsites,添加loadUserRatings到依赖项数组中。

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

请注意，里面的代码useEffect会在getWebsites,loadUserRatings更改时运行。如果没有记住这两个函数，就会发生这种情况。

防止这种情况的一个好方法是使用useCallback钩子在父组件中记住它们，然后将它们传递给Wrapper组件。

请参阅Patrick 的回答以了解如何使用useCallback.