Utilisation Async/Await avec Axios dans React.js

Suivantes

Comment utiliser async/await avec axios à réagir

Je suis en train de faire une simple requête get à mon serveur à l'aide de Async/Await dans un React.js App.
La charge du serveur d'un simple JSON à /data qui ressemble à ceci

JSON

{
   id: 1,
   name: "Aditya"
}

Je suis en mesure d'obtenir les données de mon Réagir Application à l'aide de simple jquery ajax méthode get.
Cependant, je tiens à faire usage de l'axios bibliothèque et Async/Await à suivre ES7 normes.
Mon code ressemble à ceci:

class App extends React.Component{
 async getData(){
     const res = await axios('/data');
     console.log(res.json());
 }
 render(){
     return(
         <div>
             {this.getData()}
         </div>
     );
 }
}

En utilisant cette approche, j'obtiens l'erreur suivante:

Les objets ne sont pas valides comme Réagir enfant (trouvé: [objet de la Promesse]). Si
que vous vouliez rendre une collection d'enfants, utiliser un tableau à la place.

Je ne suis pas à la mettre en œuvre correctement?

render() fonctionne correctement comme je l'ai clairement dit que je suis en mesure d'obtenir les détails lorsque j'utilise $.ajax(). Quel code dois-je ajouter? C'est une simple requête get au serveur à l'aide de ES7 normes.
Idéalement, la mise à jour de votre question avec un exécutable un Minimum, Complètes et Vérifiables exemple démontrer le problème à l'aide d'un espace réservé pour l'ajax (par exemple, setTimeout ou similaire), en utilisant la Pile des Extraits (le [<>] bouton de barre d'outils). Pile Extraits de soutien de Réagir, y compris JSX; comment faire.
...mais l'ajout d'un code absolument rend les choses claires. 🙂
Pour info, async/await fait partie de ES2017, pas ES7 (ES2016).
Merci pour l'information.

OriginalL'auteur Singh | 2017-10-13