無法在 state React 中迭代數組，發出 API 請求

Question

我不確定自己做錯了什么或缺少什么，但是當我執行獲取請求時，我無法遍歷我的對象數組。 我在控制台上得到結果，但除非我調用一個單獨的項目，否則它們不會出現在頁面上。 它僅在我使用 React 時發生，我也嘗試使用 JSON 占位符假 API 並獲得相同的結果。 React 中有什么東西可以阻止這個迭代的執行嗎？ 非常感謝你的幫助！

import React, { Component } from 'react';

class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
    this.loadData();
  }

  loadData = async () => {
    const response = await fetch('http://dev.pubmate.io/pubmate/api/0.1/user/all');
    if (response) {
      const allusers = await response.json();
      console.log(response);
      console.log(allusers);
      console.log(allusers[0].email);
      this.setState({
        isLoaded: true,
        users: [...allusers],
      });
    }
  };

  render() {
    let { isLoaded, users } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="userlist">
          Data is been loaded
          <ul>
            {users.map((user) => {
              <li key={user.id}>{user.title}</li>;
            })}
          </ul>
        </div>
      );
    }
  }
}

export default UserList;

Answer 1

你非常接近，但只需要稍微調整你的循環。

最簡單的改變是交換：

<ul>
  {users.map(user => {
    <li key={user.id}>
      {user.title}
    </li>
  })}
</ul>

為了

<ul>
  {users.map(user => ( // <--- "{" becomes "("
    <li key={user.id}>
      {user.title}
    </li>
  ))} // <--- "}" becomes ")"
</ul>

這將返回一個要渲染的元素