在本机反应中使用firebase显示来自留言板的消息答案

【问题标题】：showing messages from message board using firebase in react native在本机反应中使用firebase显示来自留言板的消息
【发布时间】：2020-01-26 02:43:50
【问题描述】：

我是 firebase 的新手，我正在关注 youtube 上关于如何使用 firebase 实时显示消息的教程。我没有收到任何错误，也无法从云 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>
            );
          }
        }

【问题讨论】：

标签： node.js reactjs firebase react-native google-cloud-firestore

【解决方案1】：

您似乎正在使用 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.com/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.com/docs/firestore/query-data/listen

【讨论】：