我一直在代码中解决这个错误，我正在创建一个下拉菜单来映射我的 Firestore 数据库中的集合。它正在呈现课程，但是当我单击其中一个课程时，它给出了以下错误：

这是我的代码：

import React, { Component } from 'react'
import firebase from 'firebase/app'
import './add.css'

export default class add extends Component {

    state = {
        course: 'TestCourse1',
        question: '',
        questionType: 'MultipleChoice',
        correctAnswer: '',
        wrongAnswer: '',
        wrongAnswer2: '',
        wrongAnswer3: '',
        courses: []
    }

    componentDidMount() {
        let db = firebase.firestore()

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


    handleChange = (e) => {
        this.setState({
        [e.target.id]: e.target.value,
        }) 
    }

    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.state)
    }



    render() {

        const {courses} = this.state
        return (
            <div className = "Container">
            <div className = "AddQuestion">
               <h1> Add a question </h1>
               <div className = "AddQuestionFormContainer">
                <form>

                    <label htmlFor = "courses"> Courses</label>  <br/>
                    <select name = "course" id = "courses" onChange = {this.handleChange} value = {this.state.course}>
                    {
                        courses && courses.map(course => {
                            return <option value = {course.courseName} key = {course.courseName}> {course.courseName}</option>
                        })

                    }
                    </select> <br/><br/>

                    <label  htmlFor = "question"> Question </label>  <br/>
                    <input type = "text" id = "question" placeholder = "Enter your question" onChange={this.handleChange}/>
                    <br/><br/>

                    <label  htmlFor = "question"> Question Type </label><br/>
                    <select name = "questionType" id = "questionType" onChange={this.handleChange} value = {this.state.questionType}  >
                        <option value = "MultipleChoice" > Multiple Choice</option>
                        <option value = "TrueOrFalse"> True or False </option>
                    </select>
                    <br/><br/>

                    <label  htmlFor = "correctAnswer"> Correct Answer</label> <br/>
                    <input type = "text" id = "correctAnswer" placeholder = "Correct Answer" onChange={this.handleChange}/>
                    <br/><br/>
                    <label  htmlFor = "wrongAnswer"> Wrong Answers </label><br/>
                    <input type = "text" id = "wrongAnswer" placeholder = "Wrong Answer" onChange={this.handleChange} /><br/>
                    <input type = "text" id = "wrongAnswer2" placeholder = "Wrong Answer" onChange={this.handleChange} /><br/>
                    <input type = "text" id = "wrongAnswer3" placeholder = "Wrong Answer" onChange={this.handleChange} /><br/> <br/> 

                    <button onClick = {this.handleSubmit}> Submit </button>





                </form>
               </div>
            </div>
            </div>
        )
    }
}

对象的值呈现为我的状态很好，只是当我去选择一个选项在我的下拉列表中时它返回错误！

任何帮助都将不胜感激。

编辑 1

在我的 componentDidMount() 中添加 console.log 后，返回的内容如下

代码

 componentDidMount() {
        let db = firebase.firestore()

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

Console.log