Axios AJAX-Aufruf in React, der nur den Anfangszustand zurückgibt

Question

Ich versuche, einen einfachen AJAX-Aufruf mit Axios in React durchzuführen, aber ich kann nicht herausfinden, wo ich falsch liege.

Hier ist, was ich bisher habe (in meiner Komponente):

ComponentDidMount() { 
    axios.get('https://jsonplaceholder.typicode.com/users') 
     .then(res => { 
     const users = res 
     this.setState({ users }); 
     }); 
} 

render() { 
    console.log(this.state.users) // returns the **initialised EMPTY array** 
    return (
    <div> 
     {this.state.users.map(user => <p>{user.name}</p>)} // returns nothing 
    </div> 
    ) 
} 

ich an der URL ein einfaches Array am Zugriff auf in der .get() Methode gegeben (check it out, es ist Struktur, wenn nötig, um zu sehen). Ich kette dann auf die Versprechen und übergeben Sie das res Argument in einer Pfeilfunktion.

Dann weise ich die users Variable dem Ergebnis zu und versuche, den Zustand als dies zu setzen. Also an dieser Stelle erwarte ich, dass this.state.users dem resultierenden Array gleich ist.

jedoch ...

A) Wenn ich console.log (this.state.users) versuchen, es gibt die initialisierten leeres Array

B) Wenn ich versuche, eine Karte des machen Array, Iterieren durch die Eigenschaft name auf jedem Objekt, wieder nichts.

Wohin gehe ich falsch?

Answer 1

Ein Teil aus dem Typo (wie Phi Nguyen angegeben), ein paar andere Dinge zu beheben:

1) Axios das Versprechen mit einem Antwortobjekt löst. So die Ergebnisse zu erhalten was Sie tun müssen:

axios.get('https://jsonplaceholder.typicode.com/users') 
    .then(res => { 
     const users = res.data; // Assuming the response body contains the array 
     this.setState({ users }); 
    }); 

Schauen Sie sich die Dokumentation über das Response-Objekt hier: https://github.com/mzabriskie/axios#response-schema

2) Wenn es eine Ausnahme (Ihre Anforderung fehlschlägt) Sie es wahrscheinlich zu handhaben wollen statt es zu schlucken. Also:

axios.get('https://jsonplaceholder.typicode.com/users') 
    .then(res => { 
    const users = res.data; // Assuming the response body contains the array 
    this.setState({ users }); 
    }) 
    .catch(err => { 
     // Handle the error here. E.g. use this.setState() to display an error msg. 
    }) 

Answer 2

typo. Es sollte componentDidMount anstelle von ComponentDidMount sein.