React调用fetch API时出现内存泄漏错误该如何解决

这个警告触发的核心原因是：组件已经卸载后，你的异步请求（fetch）回调仍然执行，并且尝试更新组件state。你当前写的清理函数仍然在执行setState操作，既没有终止异步请求，也没有阻止后续回调里的state更新，所以完全不生效。

无法对已卸载的组件执行React state更新。该操作无实际效果，但表明你的应用中存在内存泄漏问题。如需修复，请在useEffect清理函数中取消所有订阅和异步任务。

有两种常用的修复方式，你可以根据业务场景选择：

方案1：使用AbortController终止fetch请求（官方推荐） #

直接在组件卸载时终止未完成的fetch请求，回调不会执行成功逻辑，从根源避免state更新：

useEffect(() => {
    // 实例化终止控制器
    const abortController = new AbortController();

    fetch(myData, {
        signal: abortController.signal // 绑定终止信号到fetch
    })
        .then(response => response.json())
        .then(data => {
            // some code
            // 注意你原代码中条件判断的变量名拼写错误为consition，需修正为condition
            if (condition) {
                setData(abc);
                setDataPresent(true);
            }
        })
        .catch(err => {
            // 过滤请求终止的报错，避免不必要的异常提示
            if (err.name !== 'AbortError') {
                console.error('请求异常：', err);
            }
        });

    // 清理函数：组件卸载/依赖更新时终止请求
    return () => {
        abortController.abort();
    };
}, [dep]);

方案2：挂载状态标记位 #

如果不需要终止请求（比如上报类请求需要确保发出），可以通过标记位判断组件是否仍挂载，仅挂载时才更新state：

useEffect(() => {
    // 标记组件是否处于挂载状态
    let isMounted = true;

    fetch(myData)
        .then(response => response.json())
        .then(data => {
            // some code
            // 先判断组件是否挂载，再执行state更新
            if (isMounted && condition) {
                setData(abc);
                setDataPresent(true);
            }
        });

    // 清理函数：组件卸载时修改标记位
    return () => {
        isMounted = false;
    };
}, [dep]);

内容的提问来源于stack exchange，提问作者Eric