在React Native中使用Firebase显示来自留言板的消息
我是Firebase的新手,我正在关注youtube上有关如何使用Firebase实时显示消息的教程。我没有收到任何错误,也无法从Cloud Firestore检索消息。有人可以向我指出正确的方向吗,因为我尽了我所能,但似乎无济于事。下面是我的firestore数据库的屏幕截图,以及为避免任何复杂性而对我的代码进行了整理。
constructor(props) {
super(props);
this.state = {
message: '',
messages: [],
};
}
componentDidMount() {
firebase
.database()
.ref()
.child('/message-board/gFmLa20cKCzXilXSDGGq')
.once('value', snapshot => {
const data = snapshot.val();
if (data) {
const initMessages = [];
Object
.keys(data)
.forEach(message => initMessages.push(data[message]));
this.setState({
messages: initMessages
});
}
});
firebase
.database()
.ref()
.child('/message-board/gFmLa20cKCzXilXSDGGq')
.on('child_added', snapshot => {
const data = snapshot.val();
if (data) {
this.setState(prevState => ({
messages: [data, ...prevState.messages]
}));
}
});
}
renderItem({ item }) {
return (
<View style={styles.listItemContainer}>
<Text style={styles.listItem}>{item}</Text>
</View>
);
}
render() {
const { message, messages } = this.state;
let emptyComponent = null;
emptyComponent = (
<View style={styles.emptyComponent}>
<Text>No Messages Found</Text>
</View>
);
return (
<View style={styles.wrapper}>
<FlatList
data={messages}
renderItem={this.renderItem}
ListEmptyComponent={emptyComponent}
/>
</View>
</SafeAreaView>
);
}
}
回答如下:[您似乎正在使用Firebase代码来检索使用Firestore存储的数据。虽然它们都是firebase提供的数据库,但它们的结构和访问信息的方式不同。
一次获取消息可能看起来像这样:
db.collection("message-board").doc("gFmLa20cKCzXilXSDGGq")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
从这些文档中摘录:https://firebase.google/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection
由于您正在寻找实时更新,因此可能类似于:
db.collection("message-board").doc("gFmLa20cKCzXilXSDGGq")
.onSnapshot(function(doc) {
console.log("Current data: ", doc.data());
});
来自:https://firebase.google/docs/firestore/query-data/listen
在React Native中使用Firebase显示来自留言板的消息
我是Firebase的新手,我正在关注youtube上有关如何使用Firebase实时显示消息的教程。我没有收到任何错误,也无法从Cloud Firestore检索消息。有人可以向我指出正确的方向吗,因为我尽了我所能,但似乎无济于事。下面是我的firestore数据库的屏幕截图,以及为避免任何复杂性而对我的代码进行了整理。
constructor(props) {
super(props);
this.state = {
message: '',
messages: [],
};
}
componentDidMount() {
firebase
.database()
.ref()
.child('/message-board/gFmLa20cKCzXilXSDGGq')
.once('value', snapshot => {
const data = snapshot.val();
if (data) {
const initMessages = [];
Object
.keys(data)
.forEach(message => initMessages.push(data[message]));
this.setState({
messages: initMessages
});
}
});
firebase
.database()
.ref()
.child('/message-board/gFmLa20cKCzXilXSDGGq')
.on('child_added', snapshot => {
const data = snapshot.val();
if (data) {
this.setState(prevState => ({
messages: [data, ...prevState.messages]
}));
}
});
}
renderItem({ item }) {
return (
<View style={styles.listItemContainer}>
<Text style={styles.listItem}>{item}</Text>
</View>
);
}
render() {
const { message, messages } = this.state;
let emptyComponent = null;
emptyComponent = (
<View style={styles.emptyComponent}>
<Text>No Messages Found</Text>
</View>
);
return (
<View style={styles.wrapper}>
<FlatList
data={messages}
renderItem={this.renderItem}
ListEmptyComponent={emptyComponent}
/>
</View>
</SafeAreaView>
);
}
}
回答如下:[您似乎正在使用Firebase代码来检索使用Firestore存储的数据。虽然它们都是firebase提供的数据库,但它们的结构和访问信息的方式不同。
一次获取消息可能看起来像这样:
db.collection("message-board").doc("gFmLa20cKCzXilXSDGGq")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
从这些文档中摘录:https://firebase.google/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection
由于您正在寻找实时更新,因此可能类似于:
db.collection("message-board").doc("gFmLa20cKCzXilXSDGGq")
.onSnapshot(function(doc) {
console.log("Current data: ", doc.data());
});
来自:https://firebase.google/docs/firestore/query-data/listen