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

Question

我正在开发React Native应用程序。来自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>
);
}

我的控制台：控制台数据_..错误

Answer 1

来自消防仓库的数据看起来像

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

使用平面列表。不要忘记导入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>
);
}