JavaScript 代码没有从 API 返回数据

Question

import React, { Component } from 'react';
export class FetchData extends Component {
static displayName = FetchData.name;
constructor(props) {
super(props);
this.state = { users: [], loading: true };
}
componentDidMount() {
this.populateUserData();
}
static renderUsersTable(users) {
return (
<table className='table table-striped' aria-labelledby="tabelLabel">
<thead>
<tr>
<th>Username</th>
<th>Likes</th>
<th>Image Url</th>
</tr>
</thead>
<tbody>
{users.map(id =>
<tr key={id.user}>
<td>{id.username}</td>
<td>{id.likes}</td>
<td>{id.imageUrl}</td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: FetchData.renderUsersTable(this.state.users);
return (
<div>
<h1 id="tabelLabel" >API info</h1>
<p>This component demonstrates fetching data from the api.</p>
{contents}
</div>
);
}
async populateUserData() {
const response = await fetch('http://api.myjson.com/bins/1ge417');
const data = await response.json();
this.setState({ users: data, loading: false });
}
}

为什么我的JavaScript代码没有从JSON API返回任何数据？我已经指定了一个数组类型，但它仍然不返回任何内容。如有任何帮助/更正，我们将不胜感激！

附言：这是我在"dotnet new react-o my new app"中使用的模板

Answer 1

问题出在映射函数中。你需要提取id作为密钥，保存实际用户信息的用户，点赞的帖子和imageUrl:

import React, { Component } from 'react';
export class FetchData extends Component {
static displayName = FetchData.name;
constructor(props) {
super(props);
this.state = { users: [], loading: true };
}
componentDidMount() {
this.populateUserData();
}
static renderUsersTable(users) {
return (
<table className='table table-striped' aria-labelledby="tabelLabel">
<thead>
<tr>
<th>Username</th>
<th>Likes</th>
<th>Image Url</th>
</tr>
</thead>
<tbody>
{users.map(({id, user, post}) =>
<tr key={id}>
<td>{user.username}</td>
<td>{post.likes}</td>
<td>{post.imageUrl}</td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: FetchData.renderUsersTable(this.state.users);
return (
<div>
<h1 id="tabelLabel" >API info</h1>
<p>This component demonstrates fetching data from the api.</p>
{contents}
</div>
);
}
async populateUserData() {
const response = await fetch('http://api.myjson.com/bins/1ge417');
const data = await response.json();
this.setState({ users: data, loading: false });
}
}

看看你的json:

[
{
"id": 1,
"user": {
"username": "Ola Nordmann",
"profileImageUrl": "https://randomuser.me/api/portraits/men/43.jpg"
},
"post": {
"text": "En post-tekst!",
"likes": 123,
"imageUrl": "https://picsum.photos/id/1023/500/500"
}
},
{
"id": 2,
"user": {
"username": "Kari Nordmann",
"profileImageUrl": "https://randomuser.me/api/portraits/men/42.jpg"
},
"post": {
"text": "Sjekk bildet mitt!",
"likes": 233,
"imageUrl": "https://picsum.photos/id/1018/500/500"
}
},
{
"id": 3,
"user": {
"username": "Henrik Wergeland",
"profileImageUrl": "https://randomuser.me/api/portraits/men/41.jpg"
},
"post": {
"text": "Meget posei!",
"likes": 300,
"imageUrl": "https://picsum.photos/id/1002/500/500"
}
}
]

Answer 2

请使用SSLURL。如果您的应用程序在https上运行，那么API应该在https中。

我想这就是你的问题所在。你能更新代码中的下一行并检查一下吗？

const response = await fetch('https://api.myjson.com/bins/1ge417'); // use https instead of http

希望这对你有用！

这里为您创建了演示。https://stackblitz.com/edit/react-wd8o27