Как вывести список пользователей из ReqRes API с помощью React

Question

Я обыскивал похожие вопросы и не могу найти ни одного ответа на этот точный API.Я знаю, это очень просто, я просто схожу с ума прямо сейчас .. Мне просто нужен список всех пользователей из reqres api .. Если вы посмотрите на код ниже, он объясняет, какие данные я получаю вжурналы консоли.Все, что я хочу сделать, это отобразить это в виде списка в методе рендеринга:

import React, { Component } from "react";
import axios from "axios";

class User extends Component {
  state = {
    people: []
  };

  componentDidMount() {
    axios
      .get("https://reqres.in/api/users")
      .then(response => {
        this.successShow(response);
      })
      .catch(error => {
        this.successShow(error);
      });
  }

  successShow(response) {
    this.setState({
      people: response.data.data
    });
  }

  render() {
    console.log(this.state.people[0]);
    //this console log prints this:
    //{id: 1, first_name: "George", last_name: "Bluth", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"}

    console.log(this.state.people[1]);
    //this console log prints this:
    //{id: 2, first_name: "Janet", last_name: "Weaver", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"}

    return <div>HOW DO I RENDER A LIST OF ALL THE USERS HERE??</div>;
  }
}
export default User;

Answer 1

в вашем методе render() просто итерируйте по вашему объекту people, например так:

render() {
  return (
    <ul>
      {this.state.people.map(person => (
        <li key={person.id}>{person.firstName}</li> 
      )}
    </ul>
  )
}

Только не забудьте использовать ключи для повторяющихся значений

Answer 2

Вы можете использовать map() на this.state.people

return (
  <ul>
    {this.state.people.map(({id, first_name, last_name, avatar}) => (
      <li key={id}>
        First Name: {first_name} Last Name: {last_name} avatar: {avatar}
      </li>))
    }
  </ul>
);