React Native中的`fetch`不会从URL返回预期的数据

Question

我想使用fetch() API从React Native Application中的URL加载数据。具体来说，我想加载Hackernews Jobs页面中的所有项目。

如其API文档中所述，相应的调用必须转到URL：https://hacker-news.firebaseio.com/v0/jobstories.json

在浏览器中导航到此URL时，我会按预期收到一个简单的javascript数组ID：

[11379939,11379294,11378554,11377293,11375582,11373919,11372195,11371135,11369985,11369460,11361426,11357881,11356669,11354578,11351786,11350273,11349328,11347911,11346192,11343590,11342818,11342137,11341262,11340129]

但是，当我想使用以下方法在我的React Native应用程序中加载数据时，我没有收到通过浏览器发送请求时获得的相同javascript数组。

export const fetchJobs = () => {
  return (dispatch) => {
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    })
    .then( (response) => {
      console.log('Actions - fetchJobs - received response: ', response)
      const json = JSON.parse(response)
    })
    .then( (jobs) => {
      console.log('Actions - fetchJobs - received jobs: ', jobs)
      dispatch(receiveJobs(jobs))
    })
    .catch( (error) => {
      console.warn('Actions - fetchJobs - recreived error: ', error)
    })
  }
}

我在最初的React组件中使用Redux中的fetchJobs()来调用dispatch，如下所示：

componentDidMount() {
   var fetchJobsAction = fetchJobs()
   console.log('JobsRootComponent - fetch jobs: ' + fetchJobsAction)
   const { dispatch } = this.props
   dispatch( fetchJobs() )
}

但是，在Chrome调试控制台中检查输出时，输出如下所示：

有人可以告诉我为什么我从浏览器发送的请求与我的React Native应用程序中的请求之间的响应内容有所不同？

更新：根据评论中的要求，我现在也打印了response.json()，给了我以下结果：

的确，数组数据现在似乎已存在。但我仍然不明白我现在可以从现在的位置访问它......

Answer 1

fetch的响应有它自己的JSON解析函数，只需调用即可 fetch('https://hacker-news.firebaseio.com/v0/jobstories.json') .then(reponse => response.json()) .then(json => console.log(json)) 将返回新的承诺。

{{1}}

Answer 2

在then

中使用return

如果您是chaining then calls，则必须返回response.json()的结果。

export const fetchJobs = () => {
  return (dispatch) => {
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    })
    .then( (response) => {
      console.log('Actions - fetchJobs - received response: ', response)
      return response.json();
    })
    .then( (jobs) => {
      console.log('Actions - fetchJobs - received jobs: ', jobs)
      dispatch(receiveJobs(jobs))
    })
    .catch( (error) => {
      console.warn('Actions - fetchJobs - recreived error: ', error)
    })
  }
}