首页 > 解决方案 > 使用 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);

标签: reactjsnext.jslazy-loadingserver-side-renderingunmount

解决方案


推荐阅读