如何在前端加载 Firestore 数据(本机反应)?

时间:2021-03-11 09:38:17

标签: javascript reactjs react-native

我正在开发 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

1 个答案:

答案 0 :(得分:0)

来自 Firestore 的数据看起来像

select (Company.email) as EmailName
from   Company 
where  (Company.email) like '%g%'

通过使用 FlatList。不要忘记导入 [ [ { user: "ABC", age: "25", }, ], [ { user:"XYZ", age:"30", } ], ]

ActivityIndicator