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>

从Firebase检索数据的最快方法

1 个答案: