React：在componentWillUnMount

Question

当用户在单页面应用程序中更改视图时，我想断开firebase ref。当所述用户更改视图时，我想获得一个新的firebase参考，因为我只想要过滤数据，每个视图都会过滤不同的数据。

当我更改视图并更新某些数据时，会出现问题。然后反应会触发以下错误：

  

警告：setState（...）：只能更新已安装或已安装   零件。这通常意味着您在已卸载时调用了setState（）   零件。这是一个无操作。

此错误在尝试更新已卸载的组件时引用其他视图。这个不应该发生，因为我关闭了componentWillUnMount上的引用。

在两个视图中，我都有以下代码来获取新的参考：

componentDidMount() {
    // I have declared this.ref on the constructor so I can call off() on componentWillUnMount
    this.ref = firebase.database().ref().child('mainNode').orderByChild('someProperty').equalTo('someValue');

    this.ref.on('value', (snap) => {
      let values = [];
      snap.forEach((child) => {
        let value = child.val();
        let key = child.key;
        const valueWithKey = update(value, {$merge: {key}});
        values.push(valueWithKey);
      });
      // This is the offending line
      this.setState({data: values});
    });
  }

这是我的componentWillUnMount代码：

componentWillUnMount() {
    this.ref.off();
    // I have also tried goOffline()
}

我做错了什么？

Answer 1

事实证明，正确的生命周期钩子名为componentWillUnmount而不是componentWillUnMount，这导致React不执行该功能。