通过与爱可信的数据迭代阵营JS

Question

背景

我在React.js应用作出的API调用与Axios。响应被返回，但我在呈现函数中迭代数据时遇到问题。

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

爱可信GET方法

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>