next.js - 如何修复:无法在未安装的组件 Next.js || 上执行 React 状态更新 onScroll 事件
问题描述
这里的代码
const [scroll, setScroll] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
});
}, []);
得到这个错误
警告:无法对未安装的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要解决此问题,请在 useEffect 清理函数中取消所有订阅和异步任务。
解决方案
您需要在 useEffect 清理函数中删除事件侦听器。此函数在组件卸载时运行。
useEffect(() => {
window.addEventListener("scroll", () => {
setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
});
return () => window.removeEventListener("scroll", () => {
setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
});
}, []);
为了使您的代码更具可读性,您可能希望将侦听器分离到一个单独的函数中。
useEffect(() => {
const scrollListener = () => {
setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
}
window.addEventListener("scroll", scrollListener);
return () => window.removeEventListener('scroll', scrollListener);
}, []);
推荐阅读
- c++ - C++ 代码在编译过程中因错误分段错误而停止
- javascript - 如何从 Express Server 中的不同文件夹加载 API 端点?
- neo4j - neo4j neosemantics:加载模型约束
- python - Matplotlib 散点图中的分组值
- classification - weka 对输出的简单逻辑回归解释
- c# - 如何生成 sql 命令以使用其他列更新主键
- node.js - TypeError:Joi.validate 不是节点 js 中的函数
- python - 尽管文件不仅仅是换行符,但从 .docx 文件中读取会产生换行符
- python - 以可理解的形式重写 for 循环
- python - 如何在类中获取方法的变量?