我正在使用的应用在登录时会显示用户仪表板,并带有用于导航的侧边栏.它使用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() {
    // ...
  }
}