我想用 firestore 渲染我的数据。
我获取数据并在我的组件上调用它didmount:
constructor(props) {
super(props);
this.state = {
Teams: [],
};
}
getMesFriendsRequest = async () => {
firestore()
.collection("Teams")
// Filter results
.where("uid", "==", await AsyncStorage.getItem("userID"))
.get()
.then((querySnapshot) => {
if (querySnapshot.empty) {
console.log("no documents found");
} else {
querySnapshot.forEach((doc) => {
let Teams1 = doc._data;
this.setState({ Teams: this.state.Teams.push(Teams1) });
console.log("cc132132", JSON.stringify(this.state.Teams));
});
}
});
};
componentDidMount() {
this.getMesFriendsRequest();
}
然后,我对函数做了一个
.map
:
RenderMyFriends = () => {
return this.state.Teams.map((element) => {
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<View>
<Text style={{ color: "#5DC1D3" }}>{element.Activity}</Text>
<Text style={{ color: "#5DC1D3" }}>{element.City}</Text>
<Text style={{ color: "#5DC1D3" }}>{element.members}</Text>
</View>
</View>
);
});
};
当我将函数
renderMyFriends
放在渲染上时,出现错误:
未定义不是一个函数(靠近“..._this.state.Teams.map...”)
这是我在 firestore 上的模型:
我改变了你们中的一些renderMyFriend功能代码,它可能会帮助你减少错误
RenderMyFriends = () => {
this.state.Teams.map((element) => {
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<View>
<Text style={{ color: "#5DC1D3" }}>{element.Activity}</Text>
<Text style={{ color: "#5DC1D3" }}>{element.City}</Text>
<Text style={{ color: "#5DC1D3" }}>{element.members}</Text>
</View>
</View>
);
}); };