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 的工作示例 。