Wyświetlanie danych z Api React

Question

Chce wyświetlić dane z API w reaccie które zwraca takiego JSON'a:

{
  "data": [
    {
      "slug": "song1",
      "_id": "5dfa9511a71ef835bc3216ba",
      "title": "song1",
      "createdAt": "2019-12-18T21:07:29.093Z",
      "updatedAt": "2019-12-26T17:44:07.852Z",
      "__v": 0
    },
    {
      "slug": "song2",
      "_id": "5dfa4609c12e5b29546a59a6",
      "title": "song2",
      "createdAt": "2019-12-18T15:30:17.767Z",
      "updatedAt": "2019-12-26T17:43:42.854Z",
      "__v": 0
    }
  ],
  "count": 2
}

W reakcie wygląda to tak:

import React, { Component } from 'react';

export default class Customers extends Component {
  constructor() {
    super();
    this.state = {
      customers: []
    };
  }
  componentDidMount() {
    fetch('http://localhost:3000')
      .then(res => res.json())
      .then(customers =>
        this.setState({ customers }, () => console.log('Fetch data', customers))
      );
  }
  render() {
    return (
      <div>
        <h2>Data: </h2>
        <ul>{this.state.customers[1]}</ul>
      </div>
    );
  }
}

W konsoli fetch zwraca mi takie coś:

I tutaj mam problem, w jaki sposób mogę teraz te dane wyrenderować?

Próbowałem w taki sposób:

{this.state.customers.map(res => (
  <div>{res.title}</div>
))}

Zwraca błąd

TypeError: this.state.customers.map is not a function

 

Ktoś może nakierować jak rozwiązać mój problem?

 

Dziękuje, pozdrawiam

Answer 1

No ale przecież masz wyraźnie napisane co jest błędem i sam robisz console loga na strukturze, to zobacz co tam masz :) Obiekt customers ma dwa pola "count" oraz "data" i to "data" jest dopiero tablicą... :)

Comments

Czasami szukam tego co nie trzeba.. Pół dnia szukania po internecie a tu wystarczyło jedną rzecz zmienić :-)

Dla kogoś kto będzie miał problem taki jak ja :

const persons = res.data

zamienić na

const persons = res.data.data

w renderze:

        {this.state.persons.map(person => (

          <li>{person.title}</li>

       ))}

 

Dzięki bardzo za pomoc :P I szczęśliwego nowego roku życzę!

---

tak na marginesie to radzę unikać sytuacji, gdy masz "data.data", "payment.payment" itp. itd. Wiem, że czasami kontrakty z back-endem czy zewnętrznym API jest jaki jest, ale jesli masz na to wpływ to lepiej zrobić różne nazwy pól, trudniej wtedy o pomyłkę :)

---

Właśnie to zmieniłem, jeszcze raz dzięki za pomoc!