reactjs - 使用 react-cool-inview 时无法对未安装的组件执行 React 状态更新
问题描述
我正在使用 react-cool-inview 来处理下一个 js 中的延迟加载 ssr,但是当我将路由器链接重定向到下一页时,它被显示了
"index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in Footer (created by Layout)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in main (created by Layout)
in div (created by Layout)
in Layout (created by Homepage)
in Homepage (created by App)"
组件显示问题:
import React, { useEffect } from "react";
import "./style.scss";
import useInView from "react-cool-inview";
import { Link } from 'routers';
const Footer = () => {
const { observe, inView } = useInView({
onEnter: ({ unobserve }) => unobserve(),
});
return (
<div className="footer pt-4 pb-5" ref={observe}>
{inview && "something"}
</div>
);
};
export default React.memo(Footer);
解决方案
推荐阅读
- javascript - 当表单下载目标为此 iFrame 的文件时,未调用 iFrame onload
- django - 在视图中设置存储桶 Django google storage
- php - 如何在laravel中修改eloquent返回的数组结构
- python - 使用python编写csv文件时如何添加标题
- odoo - 条码不显示
- testcontainers - 如何等到 Kafka 容器启动
- google-tag-manager - 在谷歌标签管理器中点击某个类的元素时如何触发标签?
- python - 如何批量插入 SQLAlchemy 子类(联合继承)
- javascript - 在谷歌地图的geojson数据层上添加标记
- angular - 如何知道 Angular 编译的 /dist 是否与 /src 中的源代码匹配?