动态引用Firestore文档

Question

我正在创建一个类似智力竞赛的电子学习项目，背后有一个CMS。我把CMS表格写在我的消防仓库里的一个特定集合里，然而，我希望能够在多个课程中添加一个问题。我的CMS表格有一个下拉列表，管理员可以在其中选择他们想将问题添加到的课程。然而，我不太确定如何将其转移到我的操作中，从而将问题添加至课程。

Addjs(CMS表单(

import firebase from 'firebase/app'
import './add.css'
import { createQuestion } from '../../store/actions/questionActions'
import { connect } from 'react-redux' 
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)
console.log(courses)
})
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)
this.props.createQuestion(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 = "course" onChange = {this.handleChange} value = {this.state.course}>
{
courses.length && 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>
)
}
}

const mapDispatchToProps = (dispatch) => {
return {
createQuestion: (question) => dispatch(createQuestion(question))
}
}
export default connect(null, mapDispatchToProps)(add)

questionActions.js(添加到DB集合中(

export const createQuestion = (question) =>{
return(dispatch, getState, { getFirestore, getFirebase }) => {
firestore.collection('courses').doc('testcourse1').collection('questions').add({
...question
}).then(()=>{
dispatch({type: 'CREATE_QUESTION', question});
}).catch((err)=>{
dispatch({type: 'CREATE_QUESTION_ERROR', err})
})
}
};

基本上，我需要能够制作

firestore.collection('courses').doc('testcourse1').collection('questions').add({...})

动态并从下拉菜单中设置的值中读取中间文档("测试课程1"(。

非常感谢您的帮助！

Answer 1

看起来你要么：

1. 需要createQuestion函数的第二个参数，该函数从下拉列表中获取所选问题的id。因此该方法看起来像export const createQuestion = (question, questionID) => ...
2. 由于新文档ID看起来与状态的course键的值基本相同(testcourse1与TestCourse1(，因此您可以通过调用它question.course.toLowerCase()来动态创建文档ID，在这种情况下，firestore.add()将为：

...
export const createQuestion = (question) =>{
return(dispatch, getState, { getFirestore, getFirebase }) => {
const docID = question.course.toLowerCase() // transform TestCourse1 to testcourse1
firestore
.collection('courses')
.doc(docID)
.collection('questions')
.add({
...question
})
...
};