반작용 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.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}); 
    }) 

지도를 사용하여 상태로 저장하기 위해 값을 반환하는 경우 r.data과 같은 값이없고 매우 필요하지 않습니다.

및

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