通過與愛可信的數據迭代陣營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>