Question

我有一个RN应用程序，当我安装一个组件（“收藏夹”屏幕）时，我会从Firebase读取数据，并将其设置为收藏夹组件的状态，然后再渲染。

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

警告：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。

当我添加一个新项目然后更新firebase.database().ref('userfavs').child(DeviceID)中的数据时会弹出。为了清楚起见，功能似乎没有被破坏，当我控制台从状态注销datalist数组时，新的＆＃34;收藏＆＃34;项目按预期添加在那里..

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下，所以每当我导航到＆＃34;收藏夹＆＃34;屏幕和此组件加载，它会下载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) }

React Native Error：只能更新已安装或安装的组件

1 个答案: