如何显示地图数据类型的 Firestore 数据？答案

【问题标题】：How to display firestore data of map datatype?如何显示地图数据类型的 Firestore 数据？
【发布时间】：2019-08-28 16:36:03
【问题描述】：

我刚刚学习如何在 react 本机应用程序中使用 firestore，并创建了一个包含地图数据类型的字段集合，该数据类型创建了一个层次结构。但是我在网上找不到任何关于如何显示这些数据的教程。如果有人可以提供帮助，那就太好了。谢谢。

This is the document which contains the fields of map data type

【问题讨论】：

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

【解决方案1】：

如果您从 firestore 打印数据类型“map”，它将显示[Object, Object]。这意味着它是一个 JavaScript 对象。要在 React Native 中查看此内容，您必须从对象中获取对象值。

let mapData = Object.values(snapshot.data().mapVariable);

【讨论】：

【解决方案2】：

此代码可能会有所帮助

import * as firebase from 'firebase';
 firebase.initializeApp({
    "projectId": "my-project-id",
    "apiKey": "my-api-key",
    "authDomain": "my-project.firebaseapp.com",
    "databaseURL": "https://my-project.firebaseio.com",
    "storageBucket": "my-project-id.appspot.com/",
    "messagingSenderId": "my-messaging-sender-id"
})
const db = firebase.firestore();

db
    .collection('services')
    .get()
    .then(snapshot => {
      snapshot
        .docs
        .forEach(doc => {
          console.log(JSON.parse(doc._document.data.toString()))
        });
    });

【讨论】：

感谢您如此及时的回复。但不幸的是，这段代码没有在控制台中打印任何内容。

【解决方案3】：

  const createData = (drink) => { db.collection("drinks").add(drink)
.then(() => showToast({ type: 'success', text: 'drink added' }))
.catch((error) => showToast({ type: 'danger', text: error.message }));};export default createData;

我假设您有一些用于视觉反馈的 toast 消息，并且您已经初始化了 Firebase 实例。

【讨论】：