如何在前端加载firestore数据(react native)？

Question

我正在开发React Native App。来自firestore的数据正在加载并显示在我的控制台中，但不是在前端。我在下面有类似的代码。

state={
record:[],
}

componentdidmount(){
this.displaydata();
}

displaydata =()=>{

Firebase query here//
//data gets load and stored in userrecords array below.

const userrecords=[];
userrecords.push(data); // data from firestore
console.log("User data":userrecords); // it displays it to console like below.
     --------------------
 Console : 
    Array[
       Object{
         "user":"ABC"
         "age":25
    },
    ]
    Array[
       Object{
         "user":"XYZ"
         "age":30
    },
    ]
    ----------------------
this.setState({record:userrecords})

}

在前端加载下面是我的代码:但它不加载在前端。可能的原因是什么？

 render(){
    return(
   <View style={{ flex: 1 }}>
       {this.state.record ? (
        <>
         <Text>Data from firebase firestore</Text>
         <FlatList
         style={{ flex: 1 }}
         data={this.state.record}
         keyExtractor={(key, index) => key + index}
         renderItem={(itemData) => {
           {console.log(itemData.item.age)}  // it display all data on console.
           return <Text>{itemData.item.age}</Text>; // it display last array data item only.
         }}
         />
       </>
       ) : (
       <View
         style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
       >
         <ActivityIndicator size="large" color="black" />
       </View>
     )}
     </View>
    );
    }

我的控制台：ConsoleData_ ..Error

Answer 1

来自您的firestore的数据如下所示

[
    [
      {
        user: "ABC",
        age: "25",
      },
    ],
    [
      {
       user:"XYZ",
       age:"30",
      }
    ],
]

使用FlatList进行。别忘了导入ActivityIndicator

import { StyleSheet, Text, View, FlatList, ActivityIndicator } from "react-native";   
... 
... 
render(){
    return(
       <View style={{ flex: 1 }}>
       {this.state.record ? (
        <>
         <Text>Data from firebase firestore</Text>
         <FlatList
         style={{ flex: 1 }}
         data={this.state.record}
         keyExtractor={(key, index) => key + index}
         renderItem={(itemData) => {
           return <Text>{itemData.item[0].age}</Text>;
         }}
         />
       </>
       ) : (
       <View
         style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
       >
         <ActivityIndicator size="large" color="black" />
       </View>
     )}
     </View>
    );
   }