reactjs - ReactJS 中的循环组件

Question

我正在尝试在 ReactJS 中做一个循环。

我有一个具有以下结构的数据库：

课程（收藏）-> 测试课程（doc）-> 问题（收藏）

在问题集合中，每个问题都有一个文档，其中包含一个说明问题类型的字段。

我希望我的代码遍历每个问题，找到问题类型，然后根据匹配的内容输出组件。

目前，它根据类型输出最新的文档和组件，但我不太确定如何循环它。

代码

import './App.css';
import firebaseConfig from './firebase/index'
import { Component } from 'react';
import TrueOrFalse from './components/TrueOrFalse/TrueOrFalse'
import firebase from 'firebase/app'
import MultipleChoice from './components/MultipleChoice/MultipleChoice'


class App extends Component {

  state = {
    questionType: null
  }

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

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

  render(){

    let question = null;
    if (this.state.questionType === "TrueOrFalse")
      question = <TrueOrFalse/>

    else if (this.state.questionType === "MultipleChoice")
      question = <MultipleChoice/>

    return (
      
      <div>
        {question}
      </div>
    )
  }
}

export default App

标签： reactjsfirebaseloopsgoogle-cloud-firestore

Answer 1

它只显示最后一个的原因是您在循环的每次迭代中调用 this.setState(data) 。因此，它会覆盖每个先前的值。相反，如果您希望所有问题类型都处于该状态，则需要将它们全部保存在该状态中。删除当前的 setState(data) 调用并像这样放置一个新的，

snapshot.docs.forEach(doc => {
...
})

this.setState(questionTypes);

这会将它们全部保存到组件状态中。接下来，您需要遍历 this.state.questionTypes（我将 questionType 重命名为 questionTypes）。例如你可以这样做，

render() {
  return (
    <div>
      {this.state.questionTypes.map(questionType => {
        if (questionType === 'TrueOfFalse') {
          return <TrueOfFalse />
        } else if (questionType === 'MultipleChoice') {
          return <MultipleChoice />
        }
        
        // you're missing some cases, so I'm just returning null
        return null;
      }}
    </div>
  )
}