如何遍历所有驻留在索引0上的对象数组

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

第一解决方案

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

所以（对不起，从未完成过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});

更好的方案：

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