如何解决此警告：“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?
我以前看过并尝试实现答案，但它并不能完全解决我的代码问题，谢谢！

标签： javascript reactjs react-router react-hooks

【解决方案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 会跳过这个效果。这就是我们的优化。

【讨论】：