github api v3でfetchを使用する適切な方法は？

Question

レポのすべての課題タイトルをマップして、反応コンポーネントのliにレンダリングします。私はoctokatライブラリを使用して問題のタイトルのみを抽出することができましたが、残念ながらそのライブラリは私が行っている他のものでうまくいきません。また、私はes6とフェッチapiでこれを行うことができると確信しています。

オリジナルポスト：

はES6はgithubのAPIと/約束をフェッチ使用に関する情報を見つけるhellava時間を有するれて。私はリポジトリの問題を取り出すことを試みていますが、私は明らかに何かが欠けています...私はいくつかの異なるライブラリを使ってこれを試していますが、フェッチを使用したいと思います。

更新：今、私の新しい目標は、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 
} 

しかし、 .then（data => console.log（data）） 定義されていません... 私は最初の応答=> response.json（）を返そうとしましたが（andy suggestとして）それはすでに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