标签：firebase reactjs javascript

我正在使用的应用在登录时会显示用户仪表板,并带有用于导航的侧边栏.它使用firebase.我会从firebase的异步componentDidMount()中提取大部分数据,并将数据存储在组件状态中.完成所有提取需要花费几秒钟的时间.但是,如果用户决定在提取完成之前导航到另一个屏幕,我会得到

Can’t call setState on unmounted component

警告(如预期).所以我做了一些挖掘,发现

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

使警告消失,但随后我还发现使用isMounted是反模式.

关于此问题的官方文档建议通过在componentDidMount中设置_isMounted = true并在componentWillUnmount中将其设置为false来自己跟踪安装状态.我看到实现此目标的唯一方法是通过组件状态下的变量.事实证明,setState在componentWillUnmount中不起作用. [问题1](我尝试从componentWillUnmount调用外部函数,该函数依次设置状态变量.不起作用.)

该文档提出了使用可撤销承诺的另一种方法.但是我对如何通过等待Firebase调用来实现这一点一无所知.我也找不到任何方法来阻止火力发来的中途呼叫. [问题2]

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

一种.我该如何解决这个问题？
b.这是我需要认真对待的事情吗？

解决方法:

优良作法是在请求完成后检查组件是否仍已安装,是否存在卸载组件的风险.

您无需将_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() {
    // ...
  }
}

标签：firebase,reactjs,javascript
来源： https://codeday.me/bug/20191108/2010040.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。