una sirve restful react qué para ejemplo diseño consume arquitectura json rest dom reactjs fetch

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



react consume rest api (3)

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/

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?


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.


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