与 .map() 反应时一次仅显示一个元素

Question

所以基本上我正在创建一个测验组件，我需要循环遍历所有问题，但一次只显示一个问题，在回答问题后，显示另一个问题。

我怎么能这么做呢？我通常会使用 for 循环，但不推荐，如何使用 .map() 或任何其他函数实现相同的结果？

这基本上就是我想要发生的事情：

    for(let i = 0; i < quiz.questions.length(); i++) {
        return (
            <Content>
                <View style={styles.gutter}>
                    <View style={styles.container}>
                        <View style={styles.content}>
                            <Text>{quiz.questions[i].question}</Text>
                        </View>
                        <Button
                            primary
                            label={quiz.answers.option1}
                            onPress={() => {
                                quiz.answers.option1 === quiz.questions[i].rightAnswer
                                    ? continue // would continue work here as expected?
                                    : console.log("Wrong");
                            }}></Button>
                        <Button
                            primary
                            label={quiz.answers.option2}
                            onPress={() => {
                                quiz.answers.option2 === quiz.questions[i].rightAnswer
                                    ? continue // would continue work here as expected?
                                    : console.log("Wrong");
                            }}></Button>
                        <Button
                            primary
                            label={quiz.answers.option3}
                            onPress={() => {
                                quiz.answers.option3 === quiz.questions[i].rightAnswer
                                    ? continue // would continue work here as expected?
                                    : console.log("Wrong");
                            }}></Button>
                    </View>
                </View>
            </Content>
        );
    }

Answer 1

您应该使用 useState 钩子创建一个功能组件：

import React, { useState } from 'react';
function Quiz() {
    const [index, setIndex] = useState(1);

    const current = quiz.questions[index];
    return (
        <Content>
            <View style={styles.gutter}>
                <View style={styles.container}>
                    <View style={styles.content}>
                        <Text>{current.question}</Text>
                    </View>
                    <Button
                        primary
                        label={quiz.answers.option1}
                        onPress={() => {
                            if (quiz.answers.option1 === current.rightAnswer) {
                                setIndex(index + 1);
                            } else {
                                console.log('Wrong');
                            }
                        }}
                    />
                    <Button
                        primary
                        label={quiz.answers.option2}
                        onPress={() => {
                            if (quiz.answers.option2 === current.rightAnswer) {
                                setIndex(index + 1);
                            } else {
                                console.log('Wrong');
                            }
                        }}
                    />
                    <Button
                        primary
                        label={quiz.answers.option3}
                        onPress={() => {
                            if (quiz.answers.option3 === current.rightAnswer) {
                                setIndex(index + 1);
                            } else {
                                console.log('Wrong');
                            }
                        }}
                    />
                </View>
            </View>
        </Content>
    );
}