Выполнение вызовов REST от реагирующего компонента

Я пытаюсь сделать REST-вызов из реагирующего компонента и отобразить возвращенные данные JSON в DOM

Вот мой компонент

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

Чтобы связать возвращенный json в DOM?

Ответы

Ответ 1

В вашем коде есть несколько ошибок. Тот, который, вероятно, отключает вас, - это this.setState({items:result.json()})

Метод Fetch .json() возвращает обещание, поэтому его нужно будет обрабатывать как async.

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

Я не знаю, почему .json() возвращает обещание (если кто-то может пролить свет, мне интересно).

Для функции рендеринга здесь вы идете...

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

Не забывайте уникальный ключ!

Для другого ответа нет необходимости связывать карту.

Здесь он работает...

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

Ответ 2

Вы можете попробовать это для своего метода рендеринга:

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

и не забудьте использовать .bind(this) для вашего fetch(...).then(), я не думаю, что он мог работать без...

Ответ 3

Методы извлечения возвращают Promise, что упрощает запись кода, который работает асинхронно:

В вашем случае:

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() возвращает обещание, потому что он работает в потоке ответа , и нам нужно сначала обработать весь ответ, чтобы работать.