在 React 中從 firebase Cloud Firestore 獲取數據

Question

嘗試執行以下代碼以從 firebase 雲 Firestore 獲取數據時，我得到一個空白頁面。

firebase.js：

import firebase from "firebase";

var firebaseApp = firebase.initializeApp({
  apiKey: "XXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXX"
})
var db = firebaseApp.firestore();
export { db };

從 firebase cloud firestore 獲取數據的代碼：

表單狀態.js：

import React, { Component } from "react";
import { db } from "../firebase";
class FormStatus extends Component {
    constructor(props) {
        super(props);
        this.state = { forms: [], }
    }

    componentDidMount() {
        db.collection('form').get().then(snapshot => {
            this.setState({ forms: snapshot })
        })
    }
    render() {
        const { forms } = this.state;
        return (
            <div>
                {forms.forEach(doc => {
                    return <p key={doc.id}> {doc.name}</p>
                })
                }
            </div>
        )
    }
}
export default FormStatus;

我可以在 Cloud Firestore 中發布數據，但無法從中取回數據。

Answer 1

Array 上的.forEach方法總是返回 undefined，使用.map代替，所以你得到元素數組