Отображать только один элемент одновременно с .map ()

Question

Итак, в основном я создаю компонент викторины, и мне нужно пройтись по всем вопросам, но отображать только один вопрос за раз, а после ответа на вопрос отобразить еще один.

Какя мог сделать это?Обычно я использую цикл, но это не рекомендуется, как я могу добиться того же результата с помощью .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>
    );
}

Answer 2

Если вы хотите показать только один ответ, вы должны написать код, подобный следующему: я думаю, что вы хотели загрузить уже один элемент, и вы получили сообщение об ошибке undefined, поэтому вы задаете свой вопрос. Предположим, вы получаетеваши данные через подпорки приставки (это может быть что угодно, как в обычном состоянии)

Render(){
<div>
{this.props.mydata && 
 this.props.mydata.quiz[0] &&
  this.props.mydata.quiz[0].question
}
</div>
  }

Этот код проверяет ваши данные, всякий раз, когда загруженные данные вы можете использовать, и вы не получите никакой ошибки.И вам нужно делать это всякий раз, когда ваш игрок ответил правильно, он идет +1 в массиве.

Надеюсь, у вас есть идея и она работает для вас