时间戳

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

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

问题描述

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

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

标签： javascriptreactjsreact-routerreact-hooks

解决方案

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

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

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

推荐阅读