如何在 api 响应中映射和读取对象数组（React）

Question

我正在尝试使用 (open trivia) api 构建一个 Quizz React 应用程序，我得到了 api 并将其分配给我的状态，我能够读取它的一部分但是当我试图读取里面的数组时对象 abi 我得到一个错误，你能告诉我我做错了什么以及将来如何处理这个问题。 这是我的应用程序组件：

 function App(){ const [quizz,setQuizz] = React.useState([]) const [data,setData] = React.useState({ quizzOn: true }) React.useEffect(()=>{ fetch("https://opentdb.com/api.php?amount=5&type=multiple"). then(res => res.json()). then(apiData => { dataSetter(apiData) })},[]) function dataSetter(obj){ setQuizz(obj) } function toggle(){ setData(prev => ({quizzOn:!prev.quizzOn})) }; return( <div> {data.quizzOn && <StartFront onClick={toggle} arr={quizz ? quizz : []}/>} {!data.quizzOn &&<Quizz arr={quizz}/>} </div> ) }

这是我正在尝试读取数据的测验组件：

 function Quizz(props){ const data = props.arr.results return( <div> <p>{data ? JSON.stringify(data) : "error"}</p> </div> ) }

这是可行的，但是我在“结果”之后尝试的任何操作都会出现错误，例如： props.arr.results[0].question

或者：

const data = props.arr.results.map(obj => {
 return <p>{obj.question}</p>})

最后这是要阅读的api：

    {response_code: 0
, results: [{category: "History"
, type: "multiple"
, difficulty: "medium"
, question: "The seed drill was invented by which British inventor?"
, correct_answer: "Jethro Tull"
, incorrect_answers: ["Charles Babbage"
, "Isaac Newton"
, "J.J Thomson"
]
}
, {category: "Entertainment: Music"
, type: "multiple"
, difficulty: "medium"
, question: "Who is the Pink Floyd song "Shine On You Crazy Diamond" written about?"
, correct_answer: "Syd Barrett"
, incorrect_answers: ["John Lennon"
, "David Gilmour"
, "Floyd"
]
}
, {category: "Entertainment: Television"
, type: "multiple"
, difficulty: "hard"
, question: "In "Star Trek", what is the Klingon delicacy of "gagh" made from?"
, correct_answer: "Serpent worms"
, incorrect_answers: ["Earthworms"
, "Spaghetti noodles"
, "Klingworms"
]
}}

Answer 1

组件第一次渲染时， Quizz组件接收到一个空数组，因此执行arr.results会出错，因为 arr 不是对象

您应该验证您正在接收具有名为results的键的对象。 像这样的东西：

function Quizz(props){
   const arr = {props};
   const data = props.arr.results
   
   if(!arr.results) return <></>;
   return(
        <div>
        <p>{data ? JSON.stringify(data) : "error"}</p>
        </div>
    )
}

重命名变量arr也很好