reactjs 尝试调用具有多个对象的API react JS

pbgvytdp  于 2022-12-29  发布在  React
关注(0)|答案(1)|浏览(118)

我尝试调用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

cvxl0en2

cvxl0en21#

const [quiz,setQuiz] = React.useState([""])

你的初始状态只有一个元素,所以quiz[1]是未定义的,quiz[1].question会抛出一个错误。你需要检查你没有数据的情况,或者什么都不显示,或者显示一些加载屏幕。例如:

const [quiz,setQuiz] = React.useState(null)
// ...

if (!quiz) {
  return <div>Loading...</div>
} else {
  return (
    <QuizPage
      questionOne={quiz[0].question}
      questionsTwo={quiz[1].question}
    />
  );
}

相关问题