我尝试调用API中的一个特定对象,但它返回错误...
调用第一个对象可以工作,但调用第二个对象时返回错误
下面是代码API链接:https://opentdb.com/api.php?amount=3&difficulty=easy&type=multiple
const [quiz,setQuiz] = React.useState([""])
React.useEffect(() => {
async function getQuiz() {
const res = await fetch(
"https://opentdb.com/api.php?amount=3&difficulty=easy&type=multiple"
);
const data = await res.json();
setQuiz(data.results);
}
getQuiz();
});
return (
<QuizPage
questionOne={quiz[0].question} //this works //
questionsTwo={quiz[1].question} //this not //
/>
);
我尝试创建单独的状态,但它也不工作,我尝试创建一个单独的状态,并调用第二个对象,但也不工作,我也尝试Map它,但仍然不工作,我尝试了许多其他方法来调用API,但仍然没有解决方案,我在控制台中得到这个错误ncatched类型错误无法读取未定义读取的属性'问题,考虑向树中添加错误边界以自定义错误处理行为logCapturedError
1条答案
按热度按时间cvxl0en21#
你的初始状态只有一个元素,所以
quiz[1]
是未定义的,quiz[1].question
会抛出一个错误。你需要检查你没有数据的情况,或者什么都不显示,或者显示一些加载屏幕。例如: