it-swarm.com.de

Herstellung REST Anrufe von einer reagierten Komponente

Ich versuche, REST von einer React-Komponente aufzurufen und die zurückgegebenen JSON-Daten im DOM darzustellen

Hier ist meine Komponente

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

Um den zurückgegebenen Json in ein DOM zu binden?

25
user_mda

Es gibt einige Fehler in Ihrem Code. Die, die Sie wahrscheinlich auslöst, ist die this.setState({items:result.json()}) 

Die .json()-Methode von Fetch gibt ein Versprechen zurück, sodass es asynchron behandelt werden muss.

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

Ich weiß nicht, warum .json() ein Versprechen zurückgibt (wenn jemand Licht bringen kann, bin ich interessiert).

Für die Renderfunktion geht es hier ...

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

Vergessen Sie nicht den eindeutigen Schlüssel!

Für die andere Antwort besteht keine Notwendigkeit, die Karte zu binden. 

Hier funktioniert es ...

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

41
D. Walsh

Sie können dies für Ihre Render-Methode versuchen:

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

und vergessen Sie nicht, .bind(this) für Ihre fetch(...).then() zu verwenden.

3
Mickaël R.

Abrufmethoden geben ein Promise zurück, das es einfach macht, Code zu schreiben, der asynchron arbeitet:

In Ihrem Fall:

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 () gibt ein Versprechen zurück, da dies für einen Antwort-Stream funktioniert und wir erst die gesamte Antwort verarbeiten müssen, um zu funktionieren.

0
Ashif Ali

Verwenden Sie stattdessen die folgenden. Es wird funktionieren: (Sie können die Daten auch überprüfen, wenn sie in die Konsole geladen werden.)


 constructor(props) {
        super(props);
        this.state = {
            items: []
        }
    }

 componentDidMount() {
        fetch('http://api/call')
            .then(Response => Response.json())
            .then(res => {
                console.log(res);
                this.setState({
                    items: res,
                });
            })
            .catch(error => {
                console.log(error)
            })
    }

Verwenden Sie dann das während des Renderns im Status gespeicherte Ergebnis, um es nach Bedarf anzuzeigen. 

0
Hirak JD