渲染从 firebase firestore 获取的数组数据

Posted 2023-02-22

【中文标题】渲染从 firebase firestore 获取的数组数据

【英文标题】：render array data gotten from firebase firestore

【发布时间】：2020-02-08 20:26:39

【问题描述】：

我正在尝试从 firestore 获取消息数组字段中的数据，我可以在调试器中看到数据，但无法获取消息的单个部分。我对本机和火力做出反应大致是新手。请指导我。下图是我想从我的 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);
                              );

【问题讨论】：

你试过用 .get() 方法代替 onSnapshot 吗？

我正在创建一个聊天室应用，因此使用 onSnapshot 进行实时更新

使用 useEffect() 并调用函数来获取其中的数据

你能指导我如何使用它吗？我以前从未使用过它

我现在出去了。当我到达时，我会分享代码。

【参考方案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);
              
            );
          

【参考方案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>

【讨论】：

还是一样...之前是在componentDidMount里面，抱歉我没有指出

你使用 useEffect 吗？

useEffect 用于功能组件。由于您使用的是基于类的组件。我使用了componentDidMount。您收到任何错误吗？

我在调试器或控制台日志中获取数据，但无法将获取的数据传递到 chatroomMessages 状态。我正在使用平面列表

尝试在构造函数中设置一个空状态。可能是因为视图是在请求完成之前渲染的。