Fare REST chiamate da un reagire componente

che sto cercando di fare la chiamata REST da una reazione dei componenti e rendere i dati JSON restituiti nel DOMFare REST chiamate da un reagire componente

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

Al fine di impegnare la restituito JSON in un DOM?

fonte

2016-05-27 user_mda

ci sono un paio di errori nel tuo codice. Quello che probabilmente ti fa inciampare è il this.setState({items:result.json()})

Il metodo di Fetch .json() restituisce una promessa, quindi dovrà essere trattato come asincrono.

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

Non so il motivo per cui .json() restituisce una promessa (se qualcuno può far luce, mi interessa).

Per la funzione di rendering, qui si va ...

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

Non dimenticare la chiave univoca!

Per l'altra risposta, non è necessario associare la mappa.

Qui si sta lavorando ...

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

fonte

2016-05-27 19:45:06

Grazie per l'esempio! Ho funzionato –

La funzione fetch() restituisce una Promessa a causa della sua natura asincrona. Il risultato di Ir sarà disponibile solo dopo aver completato la richiesta http, quindi una Promessa è la soluzione migliore per gestirla. –

@JoachimSchirrmacher Mi riferisco al motivo per cui result.json() restituisce una promessa. Niente su di esso richiede l'esecuzione al di fuori del contesto di esecuzione corrente. –

si può provare questo per il metodo di rendering:

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

e non dimenticate di utilizzare .bind(this) per il vostro fetch(...).then(), io non credo che potrebbe funzionare senza ...

fonte

2016-05-27 14:55:35

Fetch metodi restituirà una promessa che rende semplice per scrivere codice che funziona in modo asincrono:

Nel tuo caso:

result.json() restituisce una promessa, perché questa è funziona su un flusso di risposta e dobbiamo prima elaborare tutta la risposta per poter funzionare.

fonte

2017-08-14 13:37:36

Fare REST chiamate da un reagire componente

risposta

Problemi correlati