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 而不是将其作为 prop 传递，然后避免将其包含在 useEffect() 依赖项中。

Answer 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。

Answer 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] 作为第二个参数。这是什么意思？如果计数为 5，然后我们的组件重新渲染时计数仍然等于 5，React 将比较前一次渲染的 [5] 和下一次渲染的 [5]。因为数组中的所有项目都相同（5 === 5），React 会跳过这个效果。这是我们的优化。

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

3 个答案: