рендеринг данных массива, полученных из firebase firestore

Question

Я пытаюсь получить данные из поля моего массива сообщений из хранилища, я вижу данные в моем отладчике, но не могу получить ни одной части сообщения. Я новичок, чтобы реагировать на родную и пожарную. пожалуйста, направьте меня. На изображении ниже приведены данные, которые я хочу получить из базы данных своего пожарного магазина

ниже приведен пример кода.

          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>