從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>