Question

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

import React, { Component, useContext } from "react";
import { TabsContext } from "../../providers/TabsProvider";

const Navigation = () => {
    const { tabs, setTabs } = useContext(TabsContext);

    const openTab = (newTab) => {
        tabs.data.push(newTab);
        setTabs(tabs);
    };

    return (
        <ul className="navigation">
            <li>
               <button onClick={() => { openTab({ name: "Start", component: "StartTab" }); }}>
                  Start
               </button>
            </li>
        </ul>
    );
};

export default Navigation;

Answer 1

您的超时和/或间隔可能仍在运行，并且即使在卸载组件后也尝试更新状态。您没有清除在componentDidMount中创建的间隔和超时。

存储超时就像存储间隔一样。在您的componentDidMount中：

this._timeout = setTimeout(...)

然后，在您的componentWillUnmount中，执行以下操作：

Geolocation.clearWatch(this.watchId)
clearInterval (this._interval)
clearTimeout(this._timeout)

Answer 2

我做到了。但是仍然有一个错误。我使用了pureComponent并清除了所有超时和间隔。

我不得不说，当我从此页面转到登录页面并返回此页面时，会发生这种情况。

每次增加RAM量并将其添加到以前的值。

无法在未安装的组件上执行反应状态更新。这是无操作，但表示内存泄漏

2 个答案: