使用Effect清理功能,防止未挂载的组件异步更新

Posted

技术标签:

【中文标题】使用Effect清理功能,防止未挂载的组件异步更新【英文标题】:useEffect cleanup function to prevent unmounted component to update asynchronous 【发布时间】:2021-05-24 06:16:33 【问题描述】:

我是 React Hooks 的新手。当我从 About 部分跳到另一个部分时,会显示此警告。无需等待它完成安装。

index.js:1 警告:无法对已卸载的设备执行 React 状态更新 零件。这是一个无操作,但它表明您的内存泄漏 应用。要修复,请取消所有订阅和异步任务 在 useEffect 清理函数中。 在 FadeItems 中(在 AboutSection.jsx:32) 在 div 中(由 CardBody 创建) 在 CardBody 中(在 AboutSection.jsx:29) 在 div 中(由 Card 创建) 在卡片中(在 AboutSection.jsx:22) 在 div 中(在 AboutSection.jsx:19) 在 AbouSection(在 About.jsx:9) 在部分(在 About.jsx:7) 在 About(由 Context.Consumer 创建)

这是 FadeItems 的代码:

import React,  useState  from "react";
import PropTypes from "prop-types";
import  Fade  from "reactstrap";

const FadeItems = (props) => 

  const [count, setCount] = useState(0);

  // const [mount, setMount] = useState(true);
  // useEffect(() => 
  //   // setTimeout(() => 
  //     // let mounted = true
  //       if (mount) 
  //         mount = false;
  //       

  //     return function cleanup() 
  //         mounted = false
  //     
  //     // setCount(0);
  //   // , 300)
  // ) // prevent the unmounted component to be updated

  const  text  = props;
  return (
    <div style= backgroundColor: '#282c34', padding: '30px', borderBottom: "solid 2px #764abc">
      
        text.map((statement, index) => (
          <Fade
            in=count >= index ? true : false
            onEnter=() =>
              setTimeout(() => 
                setCount(index + 1);
              , 2000)
            
            onExiting=() => setCount(-1)
            tag="h5"
            className="mt-3"
            key=index + 100
            style= backgroundColor: '#282c34' 
          >
            statement
          </Fade>
        ))
      
    </div>
  );
;

FadeItems.propTypes =
  text: PropTypes.string,
.isRequired;

export default FadeItems;

我有一个计时器设置为在 2 秒后挂载 Fade。由道具 onEnter 调用。装上之后。正如此处的 Reacstrap 文档所建议的那样:

Fade item documentation Reactstrap

关于代码的注释部分是尝试使用 useEffect 修复。但我还不知道如何正确使用它。 如果要检查存储库:

GitHub Repository

【问题讨论】:

【参考方案1】:

您需要在useEffect的清理功能中清除设置的计时器

 const [mount, setMount] = useState(true);
   useEffect(() => 
      const timerId = setTimeout(() => 
        let mounted = true
         if (mount) 
           mount = false;
         

      return () => 
         clearTimeout(timerId);
      
   )

【讨论】:

最佳实践是使用 return () => //cleanup 函数或 return () => return () => //cleanup 函数。 试图这样做。但还是一样。

以上是关于使用Effect清理功能,防止未挂载的组件异步更新的主要内容,如果未能解决你的问题,请参考以下文章

错误:无法对未安装的组件执行 React 状态更新

反应钩子。无法对未安装的组件执行 React 状态更新

如何取消 useEffect 清理函数中的所有订阅和异步任务?

无法使用 fetch POST 方法对未安装的组件执行 React 状态更新

useEffect和useLayoutEffect

Apollo 客户端(反应) - 无法更新未安装组件的状态