React, fetching Data

Question

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;

 

Comments

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

---

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;

 

---

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

---

@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.

Answer 1

Przecież konsola wszystko mówi.

W pierwszym przykładzie nie ma tablicy pod "data.results" zamiast tego użyj samo data.map.

Comments

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