Question

我正在尝试从firestore中获取我的messages数组字段中的数据，我可以在调试器中看到数据，但无法获取消息的单个部分。我大概是本机和Firebase的新手。请指导我。下图是我要从Firestore数据库中获取的数据

下面是我的示例代码。

          const { currentUser } = Firebase.auth;
          const userUid = currentUser.uid;
          const chatroomMessages = [];

          const ref = await Firebase.firestore.collection('chatrooms');
          const getDoc = ref.doc(this.props.item.key)
                              .onSnapshot(doc => {
                                if (!doc.exists) {
                                  console.log('No such document!');
                                  return;
                                }
                                //const { createdAt } = change.data();

                               const messages = doc.data();

                               const data = messages.messages;

                               //const { ...text } = data;

                               chatroomMessages.push({
                                 data
                                 })

                               this.setState({
                                 chatroomMessages,
                                 });

                                    console.log('Document data:', chatroomMessages);
                              });

Answer 1

我能够通过执行此操作来解决

          _fetchChatData = async () => {
              this.unsubscribe = await this.newChatRef.doc(this.props.chatID)
              .onSnapshot(doc => {
                const data = doc.data().message;

                const privateMessages = [];
                for (const message in data) {
                  privateMessages.push({
                    text: data[message].text,
                    key: data[message].createdAt,
                    authorID: data[message].authorID,
                    author: data[message].author,
                    authorPic: data[message].authorPic,
                  });
                }

                this.setState({
                  privateMessages,
                });
                console.log(privateMessages);
              }
            );
          }

Answer 2

您可以尝试这样的事情：

    async function getMessages(){
           const ref = await Firebase.firestore.collection('chatrooms');
                  const getDoc = ref.doc(this.props.item.key)
                                      .onSnapshot(doc => {
                                        if (!doc.exists) {
                                          console.log('No such document!');
                                          return;
                                        }
                                        //const { createdAt } = change.data();

                                       const messages = doc.data();

                                       const data = messages.messages;

                                       //const { ...text } = data;

                                       chatroomMessages.push({
                                         data
                                         })

                                       return chatroomMessages;
                                            console.log('Document data:', chatroomMessages);
                                      });
                   this.setState({ 
                    messages : getDoc
              });
            }

尝试初始化构造函数中的状态：

  export default class Messages extends Component {
    constructor(){
    super();
      this.state = {
    messages : []
    }
      render() {
        return (
          <View style={{alignItems: 'center'}}>
          </View>
        );
      }

}

和调用函数以获取内部组件确实已安装

componentDidMount(){
     getMessages();
    }

，并且在视图内部显示为

 <div> 
   { this.state.messages.map( message => ( 
       <div> { message &&  message }  </div>
  </div>

渲染从Firebase Firestore获取的数组数据

2 个答案: