在Firebase查询填充数组后，如何确保调用setState？ [英] How do I ensure setState is called after the Firebase query populates array?

问题描述

我是Firebase的新手，并将其与React Native一起使用。我正在尝试使用Firebase中的数据填充ListView。我看到我现在可以在Firebase中使用Promises，但是，似乎我不能将它们与 .on（）一起使用，并且只能使用 .once 。因为我需要听取更改，我需要使用 .on（）。

我现在面临的挑战我希望确保在从Firebase检索数据之后（并且仅在之后）设置状态。我的代码如下：

  listen（）{
 var self = this 
 var currentUserID = firebase。 auth（）。currentUser.uid 
 var postList = firebase.database（）。ref（'/ users /'+ currentUserID +'/ postKeys'）
 postList.on（'value'，function（snapshot） {
 var posts = [] 
 snapshot.forEach（（child）=> {
 var postID = child.val（）。postID 
 var postRef = firebase.database（ ）。ref（'posts /'+ postID）
 postRef.orderByChild（'sortedDateInMilliseconds'）。on（'value'，function（postSnap）{
 posts.push（postSnap.val（））
}）
 
}）
 self.setState（{
 postCount：posts.length，
 dataSource：self.state.dataSource.cloneWithRows（posts） 
}）
}）
} 
  

结果是我最初得到一个空视图，因为在查询填充帖子arr之前调用 render（）唉。有谁知道如何确保在查询填充数组后调用 self.setState（{}）？

<非常感谢你的帮助。

解决方案

我不完全确定你的意思是空的阵列。我可以想象的唯一原因是，如果您最初在该位置尚无数据时被调用。如果这是原因，您可以使用 snapshot.exists（）检测它：

  listen（）{
 var self = this 
 var currentUserID = firebase.auth（）。currentUser.uid 
 var postList = firebase.database（）。ref（'/ users /'+ currentUserID +'/ postKeys'）
 postList.on（'value'，function（snapshot）{
 if（snapshot.exists（））{
 var posts = [] 
 snapshot.forEach（（child）=> {
 var postID = child.val（）。postID 
 var postRef = firebase.database（）。ref（'posts /'+ postID）
 postRef.orderByChild（'sortedDateInMilliseconds'）。on（'value'，function（postSnap）{
 posts.push（postSnap.val（））
}）
 
}）
 self.setState（{
 postCount：posts.length，
 dataSource：self.state.dataSource.cloneWithRows（posts）
}）
} 
}）
} 
  

I这不能解决问题，你能设置一个再生它的jsbin吗？

I am new to Firebase and using it with React Native. I am trying to populate a ListView with data from Firebase. I see that I can now use Promises in Firebase, however, it seems I cannot use them with .on() and only with .once. Because I need to listen for changes, I need to use .on().

The challenge for me now comes when I want to ensure the state is set after (and only after) the data is retrieved from Firebase. My code is below:

listen() {
    var self = this
    var currentUserID = firebase.auth().currentUser.uid
    var postList = firebase.database().ref('/users/'+currentUserID+'/postKeys')
    postList.on('value', function(snapshot) {
      var posts = []
      snapshot.forEach((child)=> {
        var postID = child.val().postID
        var postRef = firebase.database().ref('posts/'+postID)
        postRef.orderByChild('sortedDateInMilliseconds').on('value', function(postSnap) {
          posts.push(postSnap.val())          
        })

      })
      self.setState({
        postCount:posts.length,
        dataSource:self.state.dataSource.cloneWithRows(posts)
      })
    })
  }

The result is that I initially get an empty view because the render() is called before the query populates the posts array. Does anyone know how to ensure that the self.setState({}) is called after the query populates the array?

Thank you very much for your help.

解决方案

I'm not entirely sure what you mean by being called with an empty array. The only reason I can imagine is if you initially get called when there is no data yet at the location. If that is the cause, you can detect it with snapshot.exists():

listen() {
    var self = this
    var currentUserID = firebase.auth().currentUser.uid
    var postList = firebase.database().ref('/users/'+currentUserID+'/postKeys')
    postList.on('value', function(snapshot) {
      if (snapshot.exists()) {
        var posts = []
        snapshot.forEach((child)=> {
          var postID = child.val().postID
          var postRef = firebase.database().ref('posts/'+postID)
          postRef.orderByChild('sortedDateInMilliseconds').on('value', function(postSnap) {
            posts.push(postSnap.val())          
          })

        })
        self.setState({
          postCount:posts.length,
          dataSource:self.state.dataSource.cloneWithRows(posts)
        })
      }
    })
  }

If this does not fix the problem, can you set up a jsbin that reproduces it?

这篇关于在Firebase查询填充数组后，如何确保调用setState？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！