使用 React [forEach error] 從 Firestore 數據庫中的單個文檔進行渲染

Question

我目前的數據庫結構是：

課程（集合）-> 測試課程（文檔）->包含課程信息的字段

我正在嘗試閱讀課程信息而不遍歷所有課程，我只想要來自 testcourse 文檔的數據，但是，當我使用 .doc 方法嘗試獲取它時，由於'forEach' 錯誤。

我將如何取出 forEach ？ 我可以這樣做嗎？

我對 React 和 Firebase 都很陌生，如果這似乎是一個愚蠢的問題，我很抱歉！

import React, { Component } from 'react';
import '../../CourseStyles/CourseInformation.scss';
import placeholderimg from '../../../Public/Assets/placeholderimage.png';


const firebase = require("firebase");


export default class CourseInformation extends Component {

    state = {
        courses: null
    }

    componentDidMount() {
        const db = firebase.firestore();

        db.collection('courses').doc('testcourse').get().then((snapshot)=>{
            const courseData = []
            snapshot.docs.forEach(doc => {
                const data = doc.data()
                this.setState(data)
                courseData.push(data)
                console.log(this.state)
            }) 

            this.setState({courses: courseData})
        })
    }



    render() {
        return (
            <div className = "CourseInformationContainer">
                <div className = "CourseInformationImages">
                    <img src = {placeholderimg} className = "CourseInformationImage"/>
                    <img src = {placeholderimg} className = "CourseInformationImage"/>

                </div>

        <div className = "CourseInformationTextContainer">
                                    <div className = "CourseInformationText">
                                    <h1> {this.state.courseName} </h1>
                                    <p> {this.state.courseDescription}</p>
                                   
                                    <button> Let's Go</button>
                                    </div>
                                </div>
            
               
            </div>
        )
    }
}

Answer 1

當您在 firebase 中的文檔上使用 .get() 而不是 .onSnapshot() 時，您不會獲得文檔的快照。 您將獲得一個文檔，您只需通過 doc.data() 即可訪問該文檔。 如果你想監聽實時變化，你必須使用 .onSnapshot()。

db.collection('courses')
   .doc('testcourse')
    .get()
    .then(doc=>{
     const data = doc.data();
     this.setState(data)           
   });

如果你想實時更改使用 .onSnapshot() 方法

db.collection('courses')
   .doc('testcourse')
    .onSnapshot(doc=>{
       const data = doc.data();

      //do something with data and this function will be called again if a change is dont to the document 
    })

你所做的就是我們傾聽整個系列變化的方式。

db.collection('courses')
   .onSnapshot(snapshot=>{
     const courseData = []
        snapshot.docs.forEach(doc => {
            const data = doc.data()
            this.setState(data)
            courseData.push(data)
            console.log(this.state)
        }) 

        this.setState({courses: courseData})
       })

您可以 在此處閱讀有關get here和 onSnapshot 的信息