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

我正在制作一个React应用，并且收到了这个警告。组件安装时，我尝试进行两个API调用:

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

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

使用react redux的connect将这两个函数传递给组件，整个组件如下所示:

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

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

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

最佳答案

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

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

请注意，只要useEffect，getWebsites更改，loadUserRatings内的代码就会运行。如果不记住这两个功能，则会发生这种情况。
防止这种情况的一种好方法是使用useCallback钩子(Hook)将它们存储在父组件中，然后将其传递给Wrapper组件。
请参阅Patrick's answer以了解如何使用useCallback进行内存。