[英]How to return a forEach within a map function in React JS
我創建了一個測驗,並且我有一個組件可以在測驗結束時向用戶顯示結果。 我還想向用戶展示他們對/錯的問題。
目前我正在顯示questions
和正確correctAnswer
,但是所有正確答案都顯示在每個問題下。
我想在每個問題下顯示一個正確correctanswer
。 我嘗試了許多解決方案,但無法使其正常工作。 我認為我可以對每個問題進行map
,然后在.map
中執行forEach
以返回每個問題的每個正確答案,但它不起作用。
這是我到目前為止所擁有的:
resultsCard.js
組件:
import React from "react";
import "./../assets/style.css";
const ResultCard = ({
score,
playAgain,
getQuestions,
questions,
userAnswer,
correctAnswer
}) => {
return (
<div>
<div>You scored {score} out of 5! </div>
<div className="playBtnBox">
<button className="playBtn" type="button" onClick={getQuestions}>
Play again
</button>
</div>
<div>
{questions.map(question => {
return (
<div>
<div className="questionBox"> {question}</div>
<div className="questionBox"> {correctAnswer}</div>
</div>
);
})}
</div>
</div>
);
};
export default ResultCard;
index.js
使用結果的地方:
class QuizBee extends Component {
state = {
qBank: [],
score: 0,
responses: 0
};
getQuestions = () => {
quizService().then(question => {
this.setState({
qBank: question,
score: 0,
responses: 0
});
});
};
componentDidMount() {
this.getQuestions();
}
render() {
return (
<div className="container">
<div className="title">Quiz Me</div>
{this.state.qBank.length > 0 &&
this.state.responses < 5 &&
this.state.qBank.map(quest => {
const { question, answers, correct, questionId } = quest;
return (
<QuestionBox
question={question}
options={answers}
key={questionId}
correct={correct}
incrementScore={this.incrementScore}
incrementResponse={this.incrementResponse}
/>
);
})}
{this.state.responses === 5 && (
<h2>
<ResultCard
score={this.state.score}
getQuestions={this.getQuestions}
questions={this.state.qBank.map(quest => {
const {question} = quest;
return (
question
)
})}
correctAnswer={this.state.qBank.map(quest => {
const {correct} = quest;
return (
correct
)
})}
/>
</h2>
)}
</div>
);
}
}
q銀行數據:
const qBank = [
{
question:
"Virgin Trains, Virgin Atlantic and Virgin Racing, are all companies owned by which famous entrepreneur? ",
answers: ["Richard Branson", "Alan Sugar", "Donald Trump", "Bill Gates"],
correct: "Richard Branson",
questionId: "099099"
},
{
question:
'Where is the train station "Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch"?',
answers: ["Wales", "Moldova", "Czech Republic", "Denmark"],
correct: "Wales",
questionId: "183452"
},
{
question:
"Which company did Valve cooperate with in the creation of the Vive?",
answers: ["HTC", "Oculus", "Google", "Razer"],
correct: "HTC",
questionId: "267908"
},
{
question: "What's the name of Batman's parents?",
answers: [
"Thomas & Martha",
"Joey & Jackie",
"Jason & Sarah",
"TodWhat is the most common surd & Mira"
],
correct: "Thomas & Martha",
questionId: "333247"
}
]
雖然<ResultCard/>
期待一個未通過的 userAnswer 道具,但如果將其傳遞給<ResultCard...props userAnswer={some answer}/>
然后只需將 userAnswer 與正確答案進行比較;
const ResultCard = ({
score,
playAgain,
getQuestions,
questions,
userAnswer,
correctAnswer
}) => {
return (
<div>
<div>You scored {score} out of 5! </div>
<div className="playBtnBox">
<button className="playBtn" type="button" onClick={getQuestions}>
Play again
</button>
</div>
<div>
{questions.map(question => {
return (
<div>
<div className="questionBox"> {question}</div>
<div className="questionBox"> {correctAnswer ===userAnswer? 'you answered it correctly': 'you got it wrong'}</div>
</div>
);
})}
</div>
</div>
);
};
export default ResultCard;```
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.