github api v3에서 가져 오기를 사용하는 올바른 방법은 무엇입니까?

Question

나는 repo에 대한 모든 이슈 제목을 매핑하여 반응 구성 요소에서 li에 렌더링하려고합니다. 나는 octokat 라이브러리를 사용하여 이슈 타이틀 만 추출 할 수 있었지만 불행히도 그 라이브러리는 계속 진행중인 다른 것들과 잘 맞지 않습니다. 또한, 나는 es6와 fetch api로 이것을 할 수 있다고 확신한다.

원래 포스트 :

는 hellava 시간 ES6 /을 GitHub의 API를 사용하여 약속을 가져 사용에 대한 정보를 찾는 데 있었다. 내가 repo에 대한 문제를 가져 오려고하지만 분명히 뭔가를 놓치고있어 ... 나는 이것을 시도하고 달성하기 위해 몇 가지 라이브러리를 사용했지만 나는 단지 가져 오기를 사용하고 싶습니다.

업데이트 : 이제 새로운 목표는 console.log의 제목 ... 아기 단계입니다.

import React from "react"; 

export default class extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     issues: [] 
    } 
    } 
    componentWillMount() { 
    // let issueArry = [] 
    const url = "https://api.github.com/repos/fightplights/chode-stream/issues" 
    fetch(url) 
     .then(response => response) // i've tried with and without .json() 
     .then(body => console.log(body)) 
     // this logs the same response 

    } 
    render() { 
    return (
     <div> 
     <ul> 
      {here i will map this.state.issues (once i can get them =))} 
     </ul> 
     </div> 
    ) 
    } 
} 

내 부분에는 간단한 오류입니다. 나는 아직도 신생이다. =)

... 분명히 내가 DOM (안 여기에 표시)

@Andy_D 내가 응답 본문을 구문 분석되지 않았 음을 권리로 렌더링 할 필요가 만 응답 자체 (DOH!) 그러나 지금 나는 data.map (문제 => ...) 노력하고있어 data.map() 함수는 여전히 오류가 발생합니다. 이 데이터 객체는 첫 번째 약속의 응답 객체가 드로이드 여기

화면 앞에 위해 ... 손 파도 찾고있는 객체의 아니라고 믿고 날 리드 :

Response { 
    type: "cors", 
    url: "https://api.github.com/repos/fightp…", 
    redirected: false, 
    status: 200, 
    ok: true, 
    statusText: "OK", 
    headers: Headers, 
    bodyUsed: false 
} 

그러나 (데이터 => console.log (데이터)) 정의되지 않았습니다 ... 나는 첫 번째 응답 => response.json() (앤디가 제안한대로)을 반환하려고했지만 이미 json ... 내가 틀렸어?

Answer 1

응답 본문에서 JSON을 읽어야하며 렌더링하려고 시도하는 것은 전체 응답 본문입니다.

그래서 :

fetch(url) 
    .then(response => response.json()) 
    .then(data => data.map(...) 

response.json() 당신이 그것을 .then 수 있도록 반환 값 (data가) 당신이 찾고있는 JS 객체/배열 될 것입니다, 약속을 반환합니다.
https://developer.mozilla.org/en-US/docs/Web/API/Body/json