web-dev-qa-db-ja.com

反応コンポーネントから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にバインドするには？

jsonrestdomreactjsfetch
28
user_mda

コードにはいくつかのエラーがあります。おそらくあなたをつまずかせているのは、this.setState({items:result.json()})

Fetchの.json()メソッドはプロミスを返すため、非同期として処理する必要があります。

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/

44
D. Walsh

レンダリングメソッドにこれを試すことができます：

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
Mickaël R.

Fetchメソッドは、非同期的に動作するコードを簡単に記述できる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（）はプロミスを返します。これは応答ストリームで動作し、動作するために最初に応答全体を処理する必要があるためです。

0
mohdasha

代わりに次を使用してください。動作します：（コンソールにロードされている場合、データを確認することもできます）


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

次に、レンダリング中に状態に保存された結果を使用して、必要に応じて表示します。

0
Hirak JD