时间戳

首页 > 解决方案 > 即使我正在清理我的 useEffect，如何避免我的反应应用程序中的内存泄漏警告？

reactjs - 即使我正在清理我的 useEffect，如何避免我的反应应用程序中的内存泄漏警告？

问题描述

警告：无法对未安装的组件执行 React 状态更新

应用程序.js

应用程序.js

应用程序.js

使用 useIsMount 方法后，我无法将状态值作为道具传递

标签： reactjsreact-redux

解决方案

当您尝试在已卸载的组件上设置状态时，会发生这种情况。这在您发出异步请求的异步操作中很常见，然后您尝试在它解析后设置状态。

过程是这样的：

  1. 组件安装
  2. useEffect 运行并触发异步请求
  3. async 函数在设置状态函数周围创建一个闭包
  4. 组件卸载（由于任何原因导致 UI 发生变化）
  5. 请求解决
  6. 调用了闭包设置状态函数 - 但包含状态的组件已经卸载！错误发生在这里。

要解决此问题，您需要在调用状态更新函数之前检查组件是否仍然挂载。

useIsMounted您可以使用诸如钩子之类的东西来检查组件是否已安装。网上有很多这个钩子的例子。

HMR 评论了一个好useIsMounted钩子的链接，我将在此处发布：

import { useRef, useEffect } from 'react';

const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, []);
  return isMounted;
};

export default useIsMounted;

要使用该钩子，您可以在组件中调用它：

const isMounted = useIsMounted()

在您的异步函数中，在设置状态之前检查组件是否已安装：

if(isMounted.current) {
  // it's okay to set state here
}

确保将isMounted变量添加为您的依赖项，useEffect以便您拥有最新的值！

推荐阅读