Firebaseデータベースコールを同期させるにはどうすればいいですか？

Question

私はreactjsとfirebaseを使用していると私はfirebaseからフェッチされたデータをレンダリングするための問題があります。

私のreactjsコンポーネントはデータの前にロードされるので、私のウェブページがロードされると、データが表示されるまで少し時間が空白のままです。

しかし、データがロードされていない状態でページをロードしたくない場合は、前にロードしてください。だから、私はコンストラクタの状態を操作しようとしましたが、私は問題がfirebaseから来ると思います。 firebaseもconstructor()とcomponentDidMount()

で非同期にデータをフェッチするのでそうrender()はfirebaseがデータを送信するために完了しなかった場合でも呼ばれています。

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が適用されます。本文にはコンテンツがありません。