最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

在React Native中使用Firebase显示来自留言板的消息

运维笔记admin8浏览0评论

在React Native中使用Firebase显示来自留言板的消息

在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

发布评论

评论列表(0)

  1. 暂无评论