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

Question

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

我遇到的错误：

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

我的代码 sn-p：

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 函数返回一个 promise。您可以通过在 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]);