Faire des appels REST à partir d'un composant react
J'essaie de faire un appel REST à partir d'un composant react et de rendre les données JSON retournées dans le DOM
Voici mon composant
import React from 'react';
export default class ItemLister extends React.Component {
constructor() {
super();
this.state = { items: [] };
}
componentDidMount() {
fetch(`http://api/call`)
.then(result=> {
this.setState({items:result.json()});
});
}
render() {
return(
WHAT SHOULD THIS RETURN?
);
}
Afin de lier le JSON retourné dans un DOM?
3 réponses
, Il y a quelques erreurs dans votre code. Celui qui vous fait probablement trébucher est le this.setState({items:result.json()})
La Méthode .json() de Fetch renvoie une promesse, elle devra donc être traitée comme asynchrone.
fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState({items}))
Je ne sais pas pourquoi .json() renvoie une promesse (si quelqu'un peut faire la lumière, je suis intéressé).
Pour la fonction de rendu, voilà...
<ul>
{this.state.items.map(item=><li key={item.id}>{item.body}</li>)}
</ul>
N'oubliez pas la clé unique!
Pour l'autre réponse, il n'y a pas besoin de lier la carte.
Le voici travailler...
Vous pouvez essayer ceci pour votre méthode de rendu:
render() {
var resultNodes = this.state.items.map(function(result, index) {
return (
<div>result<div/>
);
}.bind(this));
return (
<div>
{resultNodes}
</div>
);
}
Et n'oubliez pas d'utiliser .bind(this) votre fetch(...).then(), je ne pense pas que ça puisse fonctionner sans...
Les méthodes Fetch renverront une promesse qui facilite l'écriture de code qui fonctionne de manière asynchrone:
Dans votre cas:
componentDidMount(){
fetch('http://api/call') // returns a promise object
.then( result => result.json()) // still returns a promise object, U need to chain it again
.then( items => this.setState({items}));
}
Résultat.json () renvoie une promesse, car cela fonctionne sur un flux de réponse et nous devons d'abord traiter la réponse entière pour fonctionner.