如何解决此警告：“React Hook useEffect 缺少依赖项：'history'”？

Posted 2023-02-21

【中文标题】如何解决此警告：“React Hook useEffect 缺少依赖项：\'history\'”？

【英文标题】：How to fix this warning: "React Hook useEffect has a missing dependency: 'history'"?如何解决此警告：“React Hook useEffect 缺少依赖项：'history'”？

【发布时间】：2021-05-17 08:30:27

【问题描述】：

当我在我的 React 应用程序中使用 ScrollToTop 组件时，我在浏览器中收到以下警告：

第 12:6 行：React Hook useEffect 缺少依赖项：'history'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

import  useEffect  from 'react';
import  withRouter  from 'react-router-dom';

function ScrollToTop( history ) 
  useEffect(() => 
    const unlisten = history.listen(() => 
      window.scrollTo(0, 0);
    );
    return () => 
      unlisten();
    
  , []);

  return (null);


export default withRouter(ScrollToTop);

我可以进行哪些更改来删除此警告？谢谢！

【问题讨论】：

这能回答你的问题吗？ How to fix missing dependency warning when using useEffect React Hook?

我以前看过并尝试实现答案，但它并不能完全解决我的代码问题，谢谢！

【参考方案1】：

您可以将history 添加到useEffect() 块的依赖列表中：

useEffect(() => 
  const unlisten = history.listen(() => 
    window.scrollTo(0, 0);
  );
  return () => 
    unlisten();
  
, [history]); // <- add history here

或者您可以导入 history 而不是将其作为道具传递，然后避免将其包含在 useEffect() 依赖项中。

【参考方案2】：

import  useEffect  from 'react';
import  withRouter  from 'react-router-dom';

function ScrollToTop( history ) 
  useEffect(() => 
    const unlisten = history.listen(() => 
      window.scrollTo(0, 0);
    );
    return () => 
      unlisten();
    
  , [history]);

  return (null);


export default withRouter(ScrollToTop);

将history 添加到作为useEffect 挂钩函数的第二个参数的数组中。这样每当history 改变时，unlisten 就会被调用。

【参考方案3】：

import  useEffect  from 'react';
import  withRouter  from 'react-router-dom';

function ScrollToTop( history ) 
  useEffect(() => 
    const unlisten = history.listen(() => 
      window.scrollTo(0, 0);
    );
    return () => 
      unlisten();
    
  , [history]); // <= you need this

  return (null);


export default withRouter(ScrollToTop);

API： https://reactjs.org/docs/hooks-effect.html 示例：

useEffect(() => 
  document.title = `You clicked $count times`;
, [count]); // Only re-run the effect if count changes

在上面的示例中，我们将 [count] 作为第二个参数传递。这是什么意思？如果 count 是 5，然后我们的组件重新渲染 count 仍然等于 5，React 将比较前一次渲染的 [5] 和下一次渲染的 [5]。因为数组中的所有项都是相同的（5 === 5），所以 React 会跳过这个效果。这就是我们的优化。