json - sirve - Hacer llamadas REST desde un componente de reacción

react consume rest api

Question

Estoy intentando realizar una llamada REST desde un componente de reacción y representar los datos JSON devueltos en el DOM

Aquí está mi componente

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?
);
}

¿Para enlazar el json devuelto en un DOM?

Answer 1

Hay un par de errores en su código. El que probablemente te está haciendo tropezar es el this.setState({items:result.json()})

El método .json() Fetch devuelve una promesa, por lo que deberá tratarse como asíncrono.

fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState({items}))

No sé por qué .json() devuelve una promesa (si alguien puede arrojar algo de luz, me interesa).

Para la función de render, aquí tienes ...

<ul>
{this.state.items.map(item=><li key={item.id}>{item.body}</li>)}
</ul>

¡No olvides la llave única!

Para la otra respuesta, no es necesario enlazar el mapa.

Aquí está funcionando ...

http://jsfiddle.net/weqm8q5w/6/

Answer 2

Los métodos de recuperación devolverán una Promesa que simplifica la escritura de código que funciona de manera asíncrona:

En tu caso:

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}));
}

result.json () devuelve una promesa, porque esto funciona en un flujo de respuesta y necesitamos procesar la respuesta completa primero para que funcione.

Answer 3

Puedes probar esto para tu método de render:

render() {
var resultNodes = this.state.items.map(function(result, index) {
return (
<div>result<div/>
);
}.bind(this));
return (
<div>
{resultNodes}
</div>
);
}

y no te olvides de usar .bind(this) para tu fetch(...).then() , no creo que pueda funcionar sin ...