javascript - react native 错误: Can only update a mounted or mounting component

Question

我有一个 RN 应用，在安装组件(“收藏夹”屏幕)时，我会从 Firebase 读取数据，并将其设置为收藏夹组件随后渲染的状态。

但是当我在另一个屏幕上并将项目添加到 firebase 中的收藏夹数据库时，我收到黄色警告:

警告:只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState、replaceState 或forceUpdate。

当我添加一个新项目并更新 firebase.database().ref('userfavs').child(DeviceID) 中的数据时，会弹出此消息。需要明确的是，该功能似乎没有损坏，当我从状态控制台注销 datalist 数组时，新的“收藏夹”项目会按预期添加到那里。

class Favorites extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datalist: []
    };
    this.favsRef = firebase.database().ref('userfavs').child(DeviceID);
  }
  listenForItems(favsRef) {
    favsRef.on('value', (snap) => {
      var items = [];
      snap.forEach((child) => {
         items.push(child.val()
          );
        });
      });
      this.setState({
        datalist: items
         });
     });
  }

  componentWillMount() {
    this.listenForItems(this.favsRef);
  }

  render() {
    console.log('state datalist:', this.state.datalist);
    ... }}

我不太明白这个错误，因为我已将 listenForItems 调用放在 componentWillMount 下，所以每当我导航到“收藏夹”屏幕和此组件时加载时，它会拉取 Firebase 中的最新数据。

谢谢!

Answer 1

您可能正在添加一个监听器，以便在卸载后将您的收藏夹组件保留在内存中。

根据文档，有一个 .off 方法用于分离监听器: https://firebase.google.com/docs/reference/js/firebase.database.Query#off

解决方案类似于:

class Favorites extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datalist: []
    }
    this.favsRef = firebase.database().ref('userfavs').child(DeviceID);
    this.listen = snap => {
      const dataItems = snap.map(child => child.val())
      this.setState({dataItems})        
    }
  }

  componentDidMount() { this.favsRef.on('value', this.listen) }
  componentWillUnmount() { this.favsRef.off('value', this.listen) }