[英]How to fix this warning: “React Hook useEffect has a missing dependency: '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);
我可以进行哪些更改来删除此警告? 谢谢!
您可以将history
添加到useEffect()
块的依赖项列表中:
useEffect(() => {
const unlisten = history.listen(() => {
window.scrollTo(0, 0);
});
return () => {
unlisten();
}
}, [history]); // <- add history here
或者您可以导入history
而不是将其作为道具传递,然后避免将其包含在useEffect()
依赖项中。
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
挂钩 function 的第二个参数的数组中。 这样一来,每当history
发生变化时,都会调用unlisten
。
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] 作为第二个参数传递。 这是什么意思? 如果 count 是 5,然后我们的组件重新渲染 count 仍然等于 5,React 将比较前一次渲染的 [5] 和下一次渲染的 [5]。 因为数组中的所有项都是相同的(5 === 5),所以 React 会跳过这个效果。 这就是我们的优化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.