フェッチを使用して反応アプリでjsonデータをレンダリングする

Question

私はリアクションアプリのAPIから人の位置についていくつかのJSONを表示しようとしています。私は大きな反応の初心者ですので、私と一緒に裸をしてください。

私は同形フェッチを使用して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を設定しようとしましたが、構文が壊れてしまったように頭を浮かべる可能性がありました。私は余分な動作もチェックしましたが、それは私の脳を爆発させました。

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

Answer 1

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