arrays - 我想解构我的 api 并使用 react 返回它如何在我的用例中实现这一点?
问题描述
我希望能够获取我的 api 并将其返回,但是我无法解构外部响应。当我签入控制台时,api 已返回并且响应中填充了正确的 json,但是我不确定为什么我无法访问结果数组并将问题与其他返回的键值对一起显示。我目前收到一个映射错误,说地图未定义。
索引.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Hello from "./Hello";
import "./style.css";
class App extends React.Component {
state = {
isLoading: true,
questions: [],
error: null
};
fetchQuestions() {
fetch(`https://opentdb.com/api.php?
amount=10&difficulty=hard&type=boolean`)
.then(res => res.results)
.then(data =>
this.setState({
questions: data,
isLoading: false
})
)
.catch(error => this.setState({ error, isLoading: false }));
}
componentDidMount() {
this.fetchQuestions();
}
render() {
const { isLoading, questions, error } = this.state;
return (
<React.Fragment>
<h1>Random User</h1>
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
questions.results.map(questions => {. //something right here
//is erroring
const { category, type, difficulty } = questions;
return (
<div key={category}>
<p>Question Type: {type}</p>
<p>Difficulty: {difficulty}</p>
<hr />
</div>
);
})
) : (
<h3>Loading...</h3>
)}
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
来自 Api 的 Json 文件
{
"response_code": 0,
"results": [
{
"category": "Entertainment: Video Games",
"type": "boolean",
"difficulty": "hard",
"question": "The retail disc of Tony Hawk's Pro Skater 5 only
comes with the tutorial.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Science: Mathematics",
"type": "boolean",
"difficulty": "hard",
"question": "The binary number "101001101" is equivalent
to the Decimal number "334"",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Science & Nature",
"type": "boolean",
"difficulty": "hard",
"question": "Scientists can grow teeth from urine.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Entertainment: Video Games",
"type": "boolean",
"difficulty": "hard",
"question": "In Undertale, having a "Fun Value" set to 56-
57 will play the "Wrong Number Song Call".",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Entertainment: Japanese Anime & Manga",
"type": "boolean",
"difficulty": "hard",
"question": "Throughout the entirety of "Dragon Ball Z",
Goku only kills two characters: a miniboss named Yakon and Kid Buu.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Geography",
"type": "boolean",
"difficulty": "hard",
"question": "Switzerland has four national languages, English being
one of them.",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Entertainment: Music",
"type": "boolean",
"difficulty": "hard",
"question": "The band STRFKR was also briefly known as Pyramiddd.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Science & Nature",
"type": "boolean",
"difficulty": "hard",
"question": "The chemical element Lithium is named after the country
of Lithuania.",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Entertainment: Japanese Anime & Manga",
"type": "boolean",
"difficulty": "hard",
"question": "Druid is a mage class in "Log Horizon".",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Vehicles",
"type": "boolean",
"difficulty": "hard",
"question": "The term "GTO" was originated by Ferrari?",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
}
]
}
解决方案
您在fetchQuestions方法中有一个错误。你应该使用res.json()而不是res.results。请检查下面的示例并将您的fetchQuestions方法替换为以下代码:
fetchQuestions() {
fetch(`https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean`)
.then(res => res.json())
.then(data =>
this.setState({
questions: data,
isLoading: false
})
)
.catch(error => this.setState({error, isLoading: false}));
}
具有状态代码检查的类似代码:
fetchQuestions() {
fetch(`https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean`)
.then(response => {
if (response.status !== 200) {
console.log('there was a problem. Status Code: ' + response.status);
return;
}
response.json().then(data => {
console.log(data);
this.setState({
questions: data,
isLoading: false
})
});
}
)
.catch(function (error) {
console.log('Error:', error);
this.setState({error, isLoading: false})
});
}
推荐阅读
- android - 无法从 FirebaseUser Flutter 检索用户
- javascript - 在 SuiteScript 2.0 自定义模块中获取/设置值
- c - CS50 可读性 pset2 中的错误
- php - PHP 包含一个基于多个参数的页面,而不仅仅是一个参数
- python - 为什么我的 SSH 暴力破解器说正确的密码不正确?
- python - 如何在函数的for循环中使用多个条件?
- go - Go接口:接口未实现,即使它是
- python - 如何在 numpy 的唯一计数中包含值“零”
- ruby-on-rails - rails 设计 id 生成器
- android - Unity 2020.1.3f1 won't build Android Project...完全卡住无法解决这些错误