反应：断开组件WillUnMount上的firebase ref

Question

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

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

警告：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 无法执行该函数。