が反応JS

Question

私はReact.jsアプリケーションにAxiosでAPI呼び出しを作っています

背景。応答は返されますが、レンダリング関数のデータを繰り返し処理する際に問題が発生しています。

JSONレスポンス

{ 
    "response": { 
    "items": [ 
     { 
     "episode_id": 8528077, 
     "type": "RECORDED", 
     "title": "REPLICON RADIO 5-16", 
     "duration": 12741360, 
     "explicit": true, 
     "show_id": 1443546, 
     "author_id": 6168026, 
     "site_url": "https://www.spreaker.com/episode/8528077", 
     "image_url": "https://d1bm3dmew779uf.cloudfront.net/large/8f84530817540e259a824dea66fcf745.jpg", 
     "image_original_url": "https://d3wo5wojvuv7l.cloudfront.net/images.spreaker.com/original/8f84530817540e259a824dea66fcf745.jpg", 
     "published_at": "2016-05-16 23:00:05", 
     "download_enabled": true, 
     "waveform_url": "https://d3770qakewhkht.cloudfront.net/episode_8528077.gz.json" 
     } 
    ], 
    "next_url": "https://api.spreaker.com/v2/shows/1443546/episodes?filter=listenable&last_id=8528077&limit=1" 
    } 
} 

Axiosは関数法

axios.get(`https://api.spreaker.com/v2/shows/1443546/episodes?filter=listenable&last_id=8589057&limit=1`) 
    .then(res => { 
     const episodes = res.data.response.items.map(r => r.data); 
     this.setState({episodes}); 
    }) 

をレンダリングしなさい

<ul> 
{this.state.episodes.map(episode => 
<li key={episode.episode_id}>{episode.title}</li> 
)} 
</ul> 

質問

ドキュメントから私はこの権利を行っていると信じていますが、エラーが発生し続けますepisode_idは存在しません。私のjsonに基づいて、データをビューにレンダリングするのは間違っていますか？

Answer 1

オブジェクト構造によると、すべてを行う必要がある：

const episodes = res.data.response.items; 
this.setState({episodes}); 

か、単に：

this.setState({episodes: res.data.response && res.data.response.items}); 

各項目にはdataプロパティがありません...（r.data）

Answer 2

あなたのAxiosで行う必要があるのは、アイテムの配列を返してから、コードマップ上にレンダリングすることです。

axios.get(`https://api.spreaker.com/v2/shows/1443546/episodes?filter=listenable&last_id=8589057&limit=1`) 
    .then(res => { 
     const episodes = res.data.response.items; 
     this.setState({episodes}); 
    }) 

mapを使用して状態に保存する値を返すときには、r.dataという値はなく、それはかなり不要です。

と

<ul> 
{this.state.episodes.map(episode => 
<li key={episode.episode_id}>{episode.title}</li> 
)} 
</ul>