Question

我想映射回购的所有问题标题，并将它们渲染为反应组件中的li。我已经能够使用octokat库只提取问题标题，但不幸的是，这个库与我正在进行的其他一些东西不一致。另外，我确信我可以用es6和fetch api来做到这一点。

原帖：

有一个hellava时间查找有关使用github api使用es6 fetch / promises的信息。我正在尝试为回购获取问题，但我显然错过了一些东西......我已经使用了一些不同的库来尝试实现这一点但我只想使用fetch。

更新：现在我的新目标仅仅是控制台。日志标题......宝贝步骤。

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（issue =＆gt; ...）我仍然得到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 =＆gt; console.log（data））这是未定义的...... 我试过返回第一个响应=＆gt; 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

使用github api v3获取fetch的正确方法是什么？

1 个答案: