Realizar llamadas REST desde un componente react

Estoy tratando de hacer una llamada REST desde un componente react y renderizar 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?

Author: user_mda, 2016-05-27
Source

3 answers

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 de Fetch .json() devuelve una promesa, por lo que tendrá que ser tratado como async.

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

No se por qué .json() devuelve una promesa (si alguien puede arrojar luz, estoy interesado).

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

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

No olvides la clave única!

Para la otra respuesta, no hay necesidad de enlazar mapa.

Aquí está trabajo...

Http://jsfiddle.net/weqm8q5w/6 /

 35
Author: D. Walsh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-30 15:35:51

Puedes probar esto para tu método de renderizado:

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

Y no se olvide de utilizar .bind(this) para su fetch(...).then(), no creo que podría funcionar sin...

 3
Author: Mickaël R.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-27 14:55:35

Los métodos Fetch devolverán una Promesa que hace que sea sencillo escribir código que funcione de manera asíncrona:

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

Resultado.json () devuelve una promesa, porque esto funciona en un flujo de respuesta y necesitamos procesar la respuesta completa primero para poder funcionar.

 0
Author: Ashif Ali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-14 13:37:36