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

Question

当我在 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);

我可以做哪些更改来消除此警告？谢谢！

Answer 1

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

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

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