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

Posted 2023-02-21

我正在制作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]);

另一答案

根据我的经验，通过props向下传递未存储的功能并不常见。如果正确地记住了它们（使用类似于useCallback()的钩子），则可以安全地将它们传递到deps的useEffect()，而在行为上没有任何区别。

如果未记忆它们，则需要像这样将它们初始化为组件状态的一部分：

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

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

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