Javascript firebase导致我的React应用程序内存泄漏，如何避免？

我正在使用的应用程序在登录时会显示一个用户仪表板，并带有一个用于导航的侧栏。它使用firebase。我在我的

异步组件didmount（）

中从firebase获取大部分数据，并将数据存储在我的组件状态。完成所有回迁需要几秒钟的时间。但是，如果用户决定在提取完成之前导航到另一个屏幕，我将获得

无法对未安装的组件调用setState

警告（如预期）。所以我做了一些挖掘，发现了这一点

if(this.isMounted()) this.setState({updates:updates})

使警告消失，但我还发现使用

isMounted

是一种反模式

有关此问题的官方文档建议我们自己跟踪装载状态，方法是在

componentDidMount

中设置

\u isMounted=true

，然后在

componentWillUnmount

中将其设置为false。我认为实现这一点的唯一方法是通过组件状态中的变量。事实证明，setState在componentWillUnmount中不起作用[Issue 1]（我尝试从

componentWillUnmount

调用一个外部函数，该函数反过来设置状态变量。不起作用。）

该文件提出了另一种方法，即使用可撤销的承诺。但我不知道如何通过

wait firebase

调用来实现这一点。我也找不到任何方法来阻止firebase中途呼叫[第二期]

所以现在我被警告和数据泄露所困扰

a。如何解决此问题？

---

B这是我需要认真对待的问题吗？

如果存在组件卸载的风险，最好在请求完成时检查组件是否仍在装载

---

您不需要将

\u isMounted

置于组件状态，因为它不会用于渲染。您可以将其直接放在组件实例上

示例

class MyComponent extends React.Component {
  state = { data: [] };

  componentDidMount() {
    this._isMounted = true;

    fetch("/example")
      .then(res => res.json())
      .then(res => {
        if (this._isMounted) {
          this.setState({ data: res.data });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    // ...
  }
}

---

您不需要将

\u isMounted

置于组件状态，因为它不会用于渲染。您可以直接将它放在组件实例上：

componentDidMount（）{this.\u isMounted=true；}componentWillUnmount（）{this.\u isMounted=false；}

@Tholle哇，我真的不知道我可以这样保存变量！！我认为状态是在组件中存储数据的唯一方式。非常感谢你。它起作用了。要是我早知道就好了。