javascript - React .map 使用 Fetch API 返回 undefined
问题描述
我希望我的 Reactrender
方法以与从 Postman 获得的类似方式从 API 返回对象。例如:
{
"meta": {
"count": 807,
"countReturned": 10,
"requestTime": 1552524395,
"responseTime": 1552524395,
"responseMs": 7
},
"data": [
{
"type": "breeds",
"id": "1",
"attributes": {
"name": "Abyssinian"
},
"relationships": {
"species": {
"data": [
{
"type": "species",
"id": "3"
}
]
}
},
"meta": []
},
但我无法使用 .map 生成我想要的对象。这是我的代码:
class Results extends Component {
constructor() {
super();
this.state = {
animals: [],
};
}
componentDidMount() {
var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
const API_KEY = process.env.REACT_APP_API_KEY;
fetch(url, {
method: 'GET',
headers: {
Authorization: API_KEY,
'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => this.setState({animals: data.results }))
}
render() {
return (
<div>
{this.state.animals.map(animal => <div>{animal.results}</div>)}
</div>
)
}
}
export default Results;
任何提示表示赞赏!
解决方案
名为“data”的回调方法的参数并不意味着它是data
响应数据的属性。
我认为回调应该是
...
.then(response => response.json())
.then(response => this.setState({animals: response.data}))
<div>
{this.state.animals.map(animal => <div>{animal.type}</div>)}
</div>
推荐阅读
- javascript - 通过附加 URL 参数循环 URL
- python - 尽可能保持文件(模块)“大”
- docusignapi - DocuSign 是否提供 REST API 以与我们的企业应用程序集成
- python - 如何同时训练两个神经网络以最小化它们的输出之间的差异?
- angular - 如何将 json res 数据解析为 http observable 中的模型?
- android - WebView 使用 postUrl 保存和恢复状态问题
- c# - 如果可能,使用带有 LINQ 的 Asp.Net MVC 5 C# 从 excel 读取数据并发送到 SQL Server
- java - 如何从 drl Drools 中的累积内部返回列表?
- android - 通过 ExoPlayer 播放 Widevine DRM 视频
- javascript - 插值,数据绑定,角度 javascript