Question

我正在使用Firebase为我的作业制作一个简单的测验应用程序。当我从firebase检索问题时，我得到一个包含1个对象的数组，其中包含2个对象。

像这样：

我想像测验一样在虚拟dom上分别渲染它们。是否可以像使用Questions.Q1.Question那样遍历它们，但是当用户按下下一个按钮时，所有问题都会动态切换到Questions.Q2.Question。

我遇到这样的问题：

getQuestions() {
    const firebaseRef = firebase.database().ref("Quizes").child("JavaScript").child("Quiz 2").child("Questions");
    firebaseRef.on("value", snap => {
        this.setState(prevState => ({
            Questions: [...prevState.Questions, snap.val()]
        }))
    })
}

然后渲染它们：

renderQuiz() {
    const { Questions, currentQuestion } = this.state;
    let QTile, choice_1, choice_2, choice_3, choice_4 = "";
    Questions.map(value => {

        QTile = value.Q1.Question;
        choice_1 = value.Q1.Choice_1;
        choice_2 = value.Q1.Choice_2;
        choice_3 = value.Q1.Choice_3;
        choice_4 = value.Q1.Choice_4;
    })
    return (
        <div className="panel-group questions">
            <div className="panel panel-primary">
                <div className="panel-heading">{QTile}</div>
                <div className="panel-body">
                    <input type="radio" value={choice_1} /> {choice_1}
                </div>
                <div className="panel-body">
                    <input type="radio" value={choice_2} /> {choice_2}
                </div>
                <div className="panel-body">
                    <input type="radio" value={choice_3} /> {choice_3}
                </div>
                <div className="panel-body">
                    <input type="radio" value={choice_4} /> {choice_4}
                </div>
            </div>
            <button className="btn btn-info" onClick={this.nextQuestion} style={{ float: "right", marginTop: "15px" }}>Next</button>
        </div>
    )
}

下一个问题当前为空

nextQuestion() {
    console.log("Next Question");
}

Answer 1

第一个解决方案：

检索问题对象时可以使用per documentation。这将产生一个带有对象键的数组。您可以将它们存储在字段或状态中，并引用该数组中当前位置的索引。

因此（对不起，从没做过Firebase，我将检查是否可以将其适应您的代码），您的最终状态将是：

{
    questions: { /* Object of questions, with keys Q1, Q2 and so */ },
    currentQuestionIndex: /* some integer that you would increment */
}

然后，要访问您的问题（使用render方法）：

const { questions, currentQuestionIndex } = this.state;
const currentQuestionKey = Object.keys(questions)[currentQuestionIndex];
const currentQuestion = questions[currentQuestionKey];

并更新问题（在您的nextQuestion中）：

this.setState({ ...this.state, currentQuestionIndex: currentQuestionIndex + 1});

更好的解决方案：

另一种选择是直接使用Object.keys函数将Questions转换为数组。

如何遍历所有位于索引0的对象数组

1 个答案: