1 回答

TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
想法:主要想法是在 API 調(diào)用中獲取 Questions 數(shù)組,并確保在那里隨機(jī)獲取 5 個(gè)問(wèn)題。我的做法是,一旦我從 API 調(diào)用接收到數(shù)據(jù),我就會(huì)執(zhí)行promise chaining
并處理所有代碼,以在另一個(gè)then()
塊中獲取 5 個(gè)隨機(jī)問(wèn)題。當(dāng)我收到 5 個(gè)隨機(jī)問(wèn)題時(shí),我將狀態(tài)保存為currentQues
.
import React, { useState, useEffect } from "react";
import "./App.css";
function App() {
const [currentQues, setcurrentQues] = useState([]);
//importing ques using api
useEffect(() => {
selectingQues();
}, []);
// selecting 5 ques at random for our quiz
const selectingQues = async () => {
const response = await fetch(
"https://opentdb.com/api.php?amount=20&category=18&difficulty=medium&type=multiple"
);
const data = await response.json();
console.log(data);
const initialQuestions = data.results;
let curr = [];
// console.log(initialQuestions.length);
let length = initialQuestions.length;
for (let i = 0; i < 5; i++) {
let selector = Math.floor(Math.random() * length);
curr[i] = initialQuestions[selector];
}
setcurrentQues(curr);
};
return (
<div className="App">
{currentQues.length > 0 && <Question currentQuestions={currentQues} />}
</div>
);
}
export default App;
const Question = ({ currentQuestions }) => {
// const { question, correct_answer } = question;
console.log(currentQuestions);
return (
<>
{currentQuestions.map((question) => (
<div key={question.question}>
<p>
<strong>Question:</strong> {question.question}
</p>
<p>
<strong>Answer:</strong> {question["correct_answer"]}
</p>
</div>
))}
</>
);
};
添加回答
舉報(bào)