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

Question

当我在React应用程序中使用ScrollToTop组件时，浏览器中会出现以下警告：

第12:6行：React Hook useEffect缺少依赖项：“history”。包括它或删除依赖项数组react hooks/dep

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

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);

应用程序编程接口：https://reactjs.org/docs/hooks-effect.html例子：

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

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

Answer 2

js prettyprint-override">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添加到数组中，该数组是useffecthook函数的第二个参数。这样每当history更改时，就会调用unlisten。

Answer 3

您可以将history添加到useffect（）块的依赖项列表中：

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

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