Как заставить базу данных базы данных Firebase быть синхронной?

Question

Я использую firebase с reactjs, и у меня есть проблема для рендеринга данных, извлеченных из firebase.

Загружает мой компонент loadjs перед данными, поэтому, когда моя веб-страница загружена, она остается пустой в течение короткого времени перед отображением данных.

Но я не хочу, чтобы моя страница загружалась без данных, которые были успешно загружены ранее. Итак, я пытался манипулировать состоянием в конструкторе, но я думаю, что проблема исходит от firebase. Поскольку фаза сбора данных извлекает данные асинхронно даже в constructor() и componentDidMount()

так что 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 будет применяться, там просто не будет никакого контента в теле.