2016-08-19 9 views
3

私はリアクションアプリのAPIから人の位置についていくつかのJSONを表示しようとしています。私は大きな反応の初心者ですので、私と一緒に裸をしてください。フェッチを使用して反応アプリで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> 
    ) 
} 

答えて

8

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

おかげで、これは私が拡張使用してこれを設定するが、その後に問題があった役立ちました自動バインディングだから私はコンストラクタを設定しましたが、今は '不明のプロパティ 'bind'を読み込めません ' – Ash

+0

私はそれをバインドして動作させることができました。テが存在する。 – Ash

関連する問題