代码之家 › 专栏 › 技术社区 › Darren

在componentDidMount中卸载什么

reactjs javascript

Darren · 技术社区 · 6 年前

在换页中 component 我正在设置 state 在里面 componentDidMount 处理 logging 身份验证为

componentDidMount() {
  if (typeof window !== 'undefined') {
    firebase.auth.onAuthStateChanged(authUser => {
      authUser
        ? this.setState(() => ({ authUser }))
        : this.setState(() => ({ authUser: null }));
    });
  }
}

但是,在某些页面上,我收到了这个错误。

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

显然, componentWillUnmount 是我需要用来卸载组件的,但是我要卸载的是 setState 或 firebase.auth.onAuthStateChanged ?

1 回复 | 直到 6 年前

Matt Way 6 年前

问题是当您的组件卸载时,您的firebase事件 onAuthStateChanged 我还是会打电话的。如果它确实在您的组件被移除(卸载)后调用,那么您将得到错误。

要解决此问题,您需要取消内部的事件订阅 componentWillUnmount() . 您可以通过调用从订户返回的函数来实现这一点。例如:

componentDidMount() {
  this.cancelSubscription = firebase.auth.onAuthStateChanged ...
}

componentWillUnmount() {
  this.cancelSubscription()
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前