无法在 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>

这将返回一个要渲染的元素