Javascript 在react with.map（）中一次只显示一个元素

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

我怎么能这么做？我通常使用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>
        );
    }

for（让i=0；i
{
quick.answers.option2==quick.questions[i]。rightAnswer
？继续//是否会按预期继续在这里工作？
：console.log（“错误”）；
}}>
{
quick.answers.option3==quick.questions[i]。rightAnswer
？继续//是否会按预期继续在这里工作？
：console.log（“错误”）；
}}>
);
}

您应该使用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>
    );
}

import React，{useState}来自“React”；
函数测验（）{
const[index，setIndex]=useState（1）；
const current=测验问题[索引]；
返回(
{当前问题}
{
如果（quick.answers.option1==当前的.rightAnswer）{
setIndex（index+1）；
}否则{
console.log（“错误”）；
}
}}
/>
{
如果（quick.answers.option2==当前的.rightAnswer）{
setIndex（index+1）；
}否则{
console.log（“错误”）；
}
}}
/>
{
如果（quick.answers.option3==当前的.rightAnswer）{
setIndex（index+1）；
}否则{
console.log（“错误”）；
}
}}
/>
);
}

您应该使用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>
    );
}

import React，{useState}来自“React”；
函数测验（）{
const[index，setIndex]=useState（1）；
const current=测验问题[索引]；
返回(
{当前问题}
{
如果（quick.answers.option1==当前的.rightAnswer）{
setIndex（index+1）；
}否则{
console.log（“错误”）；
}
}}
/>
{
如果（quick.answers.option2==当前的.rightAnswer）{
setIndex（index+1）；
}否则{
console.log（“错误”）；
}
}}
/>
{
如果（quick.answers.option3==当前的.rightAnswer）{
setIndex（index+1）；
}否则{
console.log（“错误”）；
}
}}
/>
);
}

如果您只想显示一个答案，您应该编写如下代码： 我想您已经想加载一个项目了，但收到了

未定义的

错误消息，这就是您提出问题的原因 假设您是通过redux的道具获取数据的（它可以是任何类似于常规状态的东西）

Render（）{
{this.props.mydata&&
this.props.mydata.quick[0]&&
this.props.mydata.quick[0]。问题
}
}

这段代码检查您的数据，只要加载了数据，您就可以使用它，并且不会出现任何错误。当你的玩家回答正确时，你需要让它在数组中变为+1

---

我希望你有了这个想法并能为你工作

如果你只想给出一个答案，你应该编写如下代码： 我想您已经想加载一个项目了，但收到了

未定义的

错误消息，这就是您提出问题的原因 假设您是通过redux的道具获取数据的（它可以是任何类似于常规状态的东西）

Render（）{
{this.props.mydata&&
this.props.mydata.quick[0]&&
this.props.mydata.quick[0]。问题
}
}

这段代码检查您的数据，只要加载了数据，您就可以使用它，并且不会出现任何错误。当你的玩家回答正确时，你需要让它在数组中变为+1

---

我希望您能理解这个想法并为您工作

您的示例是错误的，因为for循环

在第一次迭代中返回

。您的示例是错误的，因为for循环

在第一次迭代中返回