在反应中调用 fetch API 时出现内存泄漏错误

Question

我在 React 中编写了以下代码，但出现内存泄漏错误。我尝试了一些 hack，比如调用 abort 并将状态设置为 null，但到目前为止对我没有任何效果。

我得到的错误：

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请在使用 Effect 清理函数中取消所有订阅和异步任务。

我的代码片段：

useEffect(() => {
    //some const defined
    fetch(myData)
        .then(response => response.json())
        .then(data => {
            //some code

            if (consition) {
                //setting state
                setData(abc);
                setDataPresent(true);
            }
        });
    // fix for memory leak error
    return () => {
        setData({});
        setDataPresent(false);
    };
}, [dep]);

Answer 1

试试这个！您需要使用 useEffect 取消承诺。

在下面的代码中，fetch 函数 returns 是一个承诺。您可以通过在 useEffect 范围内设置条件来取消承诺，防止应用程序在组件卸载后设置状态。

我推荐阅读这篇关于在 useEffect 中取消承诺的短文。 https://juliangaramendy.dev/blog/use-promise-subscription

不要忘记 useEffect 中的依赖项。

// Let's start!
useEffect(() => {
    let isMounted = true;

    fetch(myData)
        .then(response => response.json())
        .then(data => {
            if (isMounted) {
                setDataPresent(true)
                setData(abc)
            }
        });

    return () => {
        isMounted = false;
    };
}, [deps]);

在反应中调用 fetch API 时出现内存泄漏错误

Memory leak error while calling fetch API in react

memory-leaks

fetch

reactjs

react-component-unmount