Самый быстрый способ получить данные из базы Firebase

Question

Я работаю с firebase и извлекаю данные «книг» из моей базы данных firebase. Затем добавление названий книг в качестве опции к выбранному тегу.

Проблема в том, что в списке выбора требуется время для зарядки! поэтому, когда я загружаю страницу, список выбора становится пустым, и через 4-5 секунд он отображается с параметрами

это мой код

var db = firebase.database()
    var ref = db.ref(); 
    // get Titles 
    var databaseRef = firebase.database().ref('titres/');
    databaseRef.once('value' , function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    const list = document.getElementById('favoris');
    [childSnapshot].forEach(item => {
      let option = document.createElement('option');
      option.value = item.key;   
      option.text=item.val().nom; 
     list.appendChild(option);
    });

      });
    });

есть ли лучший способ сделать это? Спасибо

Answer 1

Если вы используете React, создайте компонент для обработки данных и создайте свой список, и вот как я бы запрашивал данные у Firebase:

let titresDB = firebase.database().ref('titres')
titresDB.once('value', (snapshot) => {
  let data = []
  snapshot.forEach((childSnapshot) => {
    data.push({
      _key: childSnapshot.key,
      ...childSnapshot.val()
    })
  })
  // then do something with the data
  // in React you could setState
  this.setState({ data })
})

Компонент списка:

    <ul>
      {this.state.data.map((book) => {
        return (
          <li key={book._key}>
            <h3>{book.title}</h3>
            <p>{book.rating}</p>
            <p>{book.description}</p>
          </li>
        )
      })}
    </ul>