代码之家 › 专栏 › 技术社区 › Hasan

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

react-hooks react-router reactjs javascript

Hasan · 技术社区 · 5 年前

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

3 回复 | 直到 5 年前

Ori Drori 5 年前

你可以加上 history 到 useEffect() 街区:

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

或者您可以导入 历史 而不是将其作为道具传递,然后避免将其包含在 useffect() 依赖关系。

Aniket Gargya 5 年前

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 钩子函数。这是因为无论何时 历史 变化, unlisten 将被调用。

Mahdi zoraghi 5 年前

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将跳过效果。这就是我们的优化。

推荐文章

Scott Chambers · React和Electron应用程序提示我使用了无效的钩子调用

1 年前

Ali Navidi · 为什么在使用计算量大的useTransition时isPending没有立即变为true?

1 年前

nammae88 · React访问其他组件DOM节点

1 年前

masoud khanlo · axios实例的React useState问题

1 年前

lrr59 · 复制项目旁边的项目不会相应地工作

2 年前

awdreg · reactjs-useEffect未获取状态变量的更新值?

2 年前

Romn · 推送使用状态数组在React中不起作用

2 年前

pareshaann · 由于useEffect钩子,在react中无限重渲染

2 年前

Kevin Mosley · React:从本地存储读取映射返回null值

2 年前

Na N · 为什么ReactJS没有将数组中的更改反映到我的UI中?

2 年前