如何强制Firebase数据库调用同步？

Question

我正在使用firebase和reactjs，我有一个问题，用于渲染从firebase获取的数据。

我的reactjs组件在数据之前加载，因此当我的网页加载时，它会在数据显示之前保持空白一小段时间。

但我不想在没有成功加载数据之前加载我的页面。所以，我试图在构造函数中操纵状态，但我认为问题来自firebase。因为firebase甚至在constructor()和componentDidMount()

中异步获取数据

即使firebase没有完成发送数据，也会调用render()。

如果没有firebase没有发送结果，我怎么能完全阻止对渲染的反应呢？

      
      
constructor(props){
super(props)
post = database.ref().child('posts').orderByKey().equalTo(id)
      post.once('value').then(snap => {
        // I get the snap here but i don't want my page to render before 
        // all data queried have been fetched
        
      }).then(function(){
        // I've tried to add a "then" callback but it doesn't work
        // Render is still displayed too soon
      })
      

}

render(){
 let data = this.state.data
 return(
 // simple example
   <span>{this.state.data}</span>
 )
 
}

感谢。

Answer 1

你可以获取数据，然后一旦你拥有它，只有你拥有它，你是否ReactDOM.render。

它不会阻止页面加载，你的css将适用，但它不会成为正文中的任何内容。