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