web-dev-qa-db-ja.com

fetchを使用して、ReactアプリでJSONデータをレンダリングする

私は私のreactアプリでAPIから人の位置に関するJSONをレンダリングしようとしています。

isomorphic-fetchを使用してAPIからデータにアクセスしています。基本テストを追加でき、以下を使用してデータを正しく記録します。

 require('isomorphic-fetch');
 require('es6-promise').polyfill();

 var url = 'http://localhost:3000/api/data'

 fetch(url)
    .then(function(response) {
    if (response.status >= 400) {
       throw new Error("Bad response from server");
    }
    return response.json();
  })
  .then(function(data) {
     console.log(data);
  });

私が解決しようとしているのは、この応答を取得して、現在このように見えるコンポーネントにレンダリングする方法です（この例では、データはローカルjsonファイルから来ているため、それらを一緒にマージする必要があります）。

ComponentDidMountをセットアップしようとしましたが、構文を回避することができたため、壊れ続け、reduxアクションもチェックアウトしましたが、脳が爆発しました。

const personLoc = Object.keys(data.person.loc).map((content, idx) => {
    const items = data.person.loc[content].map((item, i) => (
        <p key={i}>{item.text}</p>
    ))

    return <div key={idx}>{items}</div>
})

export default function PersonLocation() {
    return (
        <div className="bio__location">
            {personLoc}
        </div>
    )
}
jsonreactjsfetch
6
Ash

componentDidMountはsetStateを設定する必要があります。

componentDidMount() {    
  var that = this;
  var url = 'http://localhost:3000/api/data'

  fetch(url)
  .then(function(response) {
    if (response.status >= 400) {
      throw new Error("Bad response from server");
    }
    return response.json();
  })
  .then(function(data) {
    that.setState({ person: data.person });
  });
}

レンダリングコンポーネントは状態をマップする必要があります。

const personLoc = Object.keys(this.state.person.loc).map((content, idx) => {
    const items = this.state.person.loc[content].map((item, i) => (
        <p key={i}>{item.text}</p>
    ))

    return <div key={idx}>{items}</div>
})
16
vijayst