Question

我正在使用 Firebase 处理我的 React Native 项目的后端。我想从数据库中检索记录并从数组中呈现一个平面列表。我试图制作一个数组，但在函数之外，它又是空的...

这是我的代码：

  var brand_list = [] // the list
  //retrieve record from firebase database
  firebase.firestore().collection('Brand').get().then((querySnapshot) => {
    querySnapshot.forEach(snapshot => {
        let data = snapshot.data();
        brand_list.push(data);
    })
    console.log(brand_list) // contains the records
  })
  console.log(brand_list) // empty again

对此有什么可能的解决方法，以便我可以很好地呈现我的平面列表？

Answer 1

在 react-native 中，您需要先使用 state 初始化变量，然后使用 setState() 更新变量，setState() 函数告诉 react-native 更新 UI。如果函数外的数组为空，则意味着您需要在此处使用 async-await，以确保您等待函数先完成。我想你试试这个：

constructor() {
    super();
    this.state = { dataFetched: [] };
  }

async fetchList(){
await firebase.firestore().collection('Brand').get().then((querySnapshot) => {
    querySnapshot.forEach(snapshot => {
        let data = snapshot.data();
        this.setState((prevState)=>{
dataFetched:[...prevState.dataFetched, data]
});
    })
    console.log(this.state.dataFetched); 
// now you can use this.state.dataFetched to update the flatList
}

Firebase 对数组做出本机反应

1 个答案: