解决React Hooks useEffect控制台报错：内存泄漏

xiaofeixiaofei小飞

已于 2022-11-11 10:18:19 修改

阅读量839

点赞数

分类专栏： TypeScript React 文章标签： react.js javascript 前端

于 2022-11-11 10:17:38 首次发布

本文链接：https://blog.csdn.net/LiYinger1/article/details/127801296

版权

React 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

TypeScript

6 篇文章 0 订阅

订阅专栏

不知道小伙伴们在使用react useEffect 的时候，在用useState中setState的时候有没有遇到内存泄漏的问题哈，解决此问题有两种方法哈，如下：

// 第一种方式：
const ExampleFC = () => {
    const isMounted = useRef<boolean>(true);
    
    useEffect(()=>{
        // 如果需要自动刷新功能，在每次进入useEffect之后
        // 需要将标志位置成true
        // isMounted.current = true;
    		return () => {isMounted.current = false;};
    })
}

// 第二种方式：
import useIsMounted from 'ismounted';

const isMounted  = useIsMounted();
const [count,setCount]=useState<number>(0);

useEffect(()=>{
    if(isMounted.current){
        setCount(count+1)
    }

},[count,isMounted])

讨论貌似是不建议使用 isMounted flag控制，改用支持cancelable的Promise，在unmount的时候cancel掉。推荐第二种方式