Firebase 对数组做出本机反应

Posted 2023-02-22

【中文标题】Firebase 对数组做出本机反应

【英文标题】：Firebase with react native to array

【发布时间】：2021-09-05 06:07:10

【问题描述】：

我正在使用 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

有什么可能的解决方法，这样我就可以很好地呈现我的平面列表了吗？

【问题讨论】：

函数外是空的，因为你正在使用异步代码；您在从 api 加载之前记录它。

【参考方案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