Firebase snapshot.foreach 每次在组件安装到 react native 时都会运行答案

【问题标题】：Firebase snapshot.foreach runs every time when the component get mounted in react nativeFirebase snapshot.foreach 每次在组件安装到 react native 时都会运行
【发布时间】：2020-09-30 12:30:17
【问题描述】：

我正在尝试制作与 firebase 原生反应的照片时间线。我的意图是当用户启动应用程序时，他/她必须按下按钮来检索数据。这看起来像这样：

在视图中：

 <TouchableOpacity onPress={() =>this.getMessagesNew(0)}><Text>Haal berichten op</Text></TouchableOpacity>

功能：

 getMessagesNew(key){
    
      console.log('triggerd')
    
      this.setState({
    amountVideos: 0,
    downloadedVideos:0,
   
  })

  this.messages = [];



  var orders =  firebase.database().ref('messages/'+key+'/posts').orderByChild('post').limitToLast(3);
  orders.on('value', snapshot => {
  
    snapshot.forEach( (order) => {
      console.log('triggerd in loop')
      let state = order.val();
      if(state != null){
        var newelement = {date: state.date, function: state.function,image:state.image,name: state.name,  text: state.text, type:state.type, post: state.post,};
        if(newelement.type == false){
          this.setState({amountVideos: this.state.amountVideos+1})
          this.downloadImage(newelement);
        }else{
          messages.push(newelement);
          if(this.state.amountVideos == 0){
            this.setState({
              loading: false,
              messagesAvailable: true,
              refresh: this.state.refresh+1,
            })
          }else{
            console.log('videos laden');
            this.setState({
              refresh: this.state.refresh+1
            })
          }
           console.log('message local val'+this.messages);
           console.log('message state val'+this.state.messages);
 
        }
          
      }else{
        this.setState({
          messagesAvailable: false,
        })
      }
    });
   

})

  

   }

函数：this.getMessagesNew() 从firebase 获取最后三个消息。这不费吹灰之力。

但该应用还允许用户将照片上传到 Firebase。一切正常，上传后用户将导航回主屏幕。这里出了问题，刚刚上传的图片已经显示出来了。虽然这不是本意。

我希望用户必须再次按下按钮才能检索新照片。

我知道函数的第一部分不是重新加载而是来自snapshot.foreach。

有没有什么办法可以停止这个过程，让它只有在按下按钮时才会发生？

【问题讨论】：

标签： reactjs firebase react-native

【解决方案1】：

您正在使用 orders.on('value', ...) 订阅更改，这就是为什么每当您上传图像时事情都会同步，因此为了实现该行为，使用 orders.once('value', ...) 从数据库中获取一次值，然后一切都会按您的预期工作

我正在重写你的代码

getMessagesNew(key){
  console.log('triggerd');
  this.setState({
      amountVideos: 0,
      downloadedVideos:0
  });

  this.messages = [];
  var orders = firebase.database().ref('messages/'+key+'/posts').orderByChild('post').limitToLast(3);
  orders.once('value', snapshot => { // observe i have changed "on" to "once"

  snapshot.forEach( (order) => {
      console.log('triggerd in loop')
      let state = order.val();
      if(state != null){
        var newelement = {date: state.date, function: state.function,image:state.image,name: state.name,  text: state.text, type:state.type, post: state.post,};
    if(newelement.type == false){
      this.setState({amountVideos: this.state.amountVideos+1})
      this.downloadImage(newelement);
    }else{
      messages.push(newelement);
      if(this.state.amountVideos == 0){
        this.setState({
          loading: false,
          messagesAvailable: true,
          refresh: this.state.refresh+1,
        })
      }else{
        console.log('videos laden');
        this.setState({
          refresh: this.state.refresh+1
        })
      }
       console.log('message local val'+this.messages);
       console.log('message state val'+this.state.messages);

    }
      
  }else{
    this.setState({
      messagesAvailable: false,
    })
  }
});


})

}

【讨论】：