J'ai parcouru des questions similaires et je ne trouve aucune réponse pour cette API exacte. Je sais que c'est vraiment facile, je perds la tête en ce moment. J'ai juste besoin d'une liste de tous les utilisateurs de l'API reqres. journaux de la console. Tout ce que je veux faire, c'est le rendre sous forme de liste dans la méthode de rendu :

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;
0
AGrush 15 mars 2019 à 05:37

2 réponses

Meilleure réponse

Vous pouvez utiliser map() sur 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>
);
2
Maheer Ali 15 mars 2019 à 02:50

Dans votre méthode render(), parcourez simplement votre objet people, par exemple comme ceci :

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

N'oubliez pas d'utiliser des clés sur les valeurs itérées

2
flppv 15 mars 2019 à 02:53