HTTP GET 请求和循环数据

以下示例显示如何将从远程源获取的一组数据呈现到组件中。

我们使用 fetch 发出一个 AJAX 请求，它是在大多数浏览器中构建的。在生产中使用 fetch polyfill 来支持旧浏览器。你还可以使用任何其他库来发出请求（例如 axios ， SuperAgent ，甚至普通的 Javascript）。

我们将接收的数据设置为组件状态，因此我们可以在 render 方法中访问它。在那里，我们使用 map 循环数据。不要忘记始终向循环元素添加唯一的 key 属性 （或 prop），这对 React 的渲染性能很重要。

import React from 'react';

class Users extends React.Component {
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
    fetch('/api/users')
      .then(response => response.json())
      .then(json => this.setState({ users: json.data }));
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        {
          this.state.users.length == 0
            ? 'Loading users...'
            : this.state.users.map(user => (
              <figure key={user.id}>
                <img src={user.avatar} />
                <figcaption>
                  {user.name}
                </figcaption>
              </figure>
            ))
        }
      </div>
    );
  }
}

ReactDOM.render(<Users />, document.getElementById('root'));

关于 JSBin 的工作示例 。