• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React, fetching Data

VPS Starter Arubacloud
0 głosów
316 wizyt
pytanie zadane 12 września 2018 w JavaScript przez Apper97 Obywatel (1,380 p.)

Siemka, chciałbym wyświetlić z API poszczególne dane, myśle, że kod wszystko wyjaśni. Nie wiem co robie źle, ale nic się nie wyświetla, state też jest pusty. Proszę o pomoc

import React from 'react';

class Users extends React.Component {
    constructor() {
        super();
        this.state = {
            pictures: [],
        };
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(results => {
                return results.json();
            })
            .then(data => {
                let pictures = data.results.map((pic) => {
                    return <div>{pic.name}</div>
                })

             this.setState({pictures: pictures}); 
             console.log(this.state.pictures)
            })
    }


    render() {
        
        return (
            <div>{this.state.pictures}</div>
        )
    }
}

export default Users;

 

komentarz 12 września 2018 przez kenjiro244 Dyskutant (8,600 p.)

Łap tutaj link z oficjalnej dokumentacji react-a https://reactjs.org/docs/faq-ajax.html

komentarz 12 września 2018 przez Apper97 Obywatel (1,380 p.)

teraz gdy robie w ten sposób jest coś takiego TypeError: items is undefined

 

 


import React from 'react';

class Users extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            names: [],
        };
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then((result) => {
                this.setState({
                    names: result.names
                })
            })
    }


    render() {
        const { names } = this.state;
        return (
            <ul>
            {names.map(item => (
              <li>
                {item.name}
              </li>
            ))}
          </ul>
        )
    }
}

export default Users;

 

komentarz 12 września 2018 przez Wiciorny Ekspert (269,120 p.)
items is undefined  +: moe pod klucyem rządas "items" a masz item ? co mówi consola jeszcze ? w której lini błąd- pobierz sobie najlepiej REACT DEBUG  do chrome ;] duzo pomgaga
1
komentarz 12 września 2018 przez k.wichura Pasjonat (19,870 p.)

@Apper97,

 async fetchData(url) {
   const data = await fetch(url);
   const json = await data.json();
   json.map((el) => this.setState({names:[...this.state.names, el.name]}))
  }


  componentDidMount() {
    this.fetchData('https://jsonplaceholder.typicode.com/users');
  }
render() {
    const { names } = this.state;
    if(!names) {
      return false;
    }
    return (
      <ul>
        {names.map(item => (
          <li>
            {item}
          </li>
        ))}
      </ul>
    )
  }
}

Tak jak mowiła reszta. Konsola prawde Ci powie.

1 odpowiedź

+1 głos
odpowiedź 12 września 2018 przez elwood Gaduła (4,180 p.)
Przecież konsola wszystko mówi.

W pierwszym przykładzie nie ma tablicy pod "data.results" zamiast tego użyj samo data.map.
komentarz 12 września 2018 przez Wiciorny Ekspert (269,120 p.)
własnie też miałem pisać, że konsola mu wszystko powie- a jak nie to znaczy że jest literówka bądź  błąd w kodzie a nie w fetchu

Podobne pytania

0 głosów
1 odpowiedź 444 wizyt
pytanie zadane 29 kwietnia 2021 w JavaScript przez rszczepanski02 Obywatel (1,180 p.)
+1 głos
1 odpowiedź 330 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)
+1 głos
0 odpowiedzi 381 wizyt
pytanie zadane 29 kwietnia 2020 w JavaScript przez Rafixstan. Obywatel (1,070 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...