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返回任何数据？我指定了一个Array类型，它仍然不返回任何东西。任何帮助/更正将不胜感激！

P.S。这是我从“ 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

可以使用SSL URL吗？如果您的应用程序在https上运行，则您的API应该在https中。

我想这就是你的问题。您可以更新代码中的以下行并进行检查吗？

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

希望这对您有用！

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

JavaScript代码未从API返回数据

2 个答案: