Javascript 在React JS中使用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});
    })

我正在

React.js

应用程序中使用

Axios

进行API调用。返回响应，但在render函数中迭代数据时遇到问题

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>

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

{this.state.scents.map（插曲=>
{eposion.title}
)}

问题

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

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

---

从文档中，我相信我做得对，但我一直得到错误

插曲id

不存在。根据我的

json

将数据呈现给视图有什么不对？

根据对象结构，您需要做的只是：

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

或者只是：

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

---

每个项目上都没有

数据

属性。。。（

r.data

）

根据对象结构，您需要做的只是：

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

或者只是：

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

---

每个项目上都没有

数据

属性。。。（

r.data

）

在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

这样的值，这是非常不必要的

呈现出

{this.state.scents.map（插曲=>
{eposion.title}
)}

在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

这样的值，这是非常不必要的

呈现出

{this.state.scents.map（插曲=>
{eposion.title}
)}