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

【问题标题】：render array data gotten from firebase firestore渲染从 firebase firestore 获取的数组数据
【发布时间】：2023-03-04 01:11:01
【问题描述】：

我正在尝试从 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() 并调用函数来获取其中的数据
你能指导我如何使用它吗？我以前从未使用过它
我现在出去了。当我到达时，我会分享代码。

标签： arrays reactjs firebase react-native google-cloud-firestore

【解决方案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 状态。我正在使用平面列表
尝试在构造函数中设置一个空状态。可能是因为视图是在请求完成之前渲染的。