如何在api响应中映射和读取对象数组(React)
如何在api响应中映射和读取对象数组(React)
提问于 2022-06-11 22:59:05
我正在尝试使用(开放的琐事) 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>
)
}
这是我的Quizz compunent，我试着阅读这些数据：
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 im tring阅读：
{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"
]
}}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-12 00:22:36
组件第一次呈现时，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也很好
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72588416
复制相关文章
相似问题
腾讯云开发者
