在React中使用fetch（）从API使用数据

Question

我创建了一个将从API提取数据的组件。 下面的代码工作正常，我可以看到在chrome中使用开发工具时数据已经被拉过，但是我似乎无法访问数组以显示所需的数据。

这就是我目前所拥有的，但是我得到了一个“项目”未定义的错误。

import React, { Component } from 'react';

class FetchConnectApi extends Component {
  constructor(props) {
    super(props)
    this.state = {
      response: []
    }
  }

  componentDidMount() {
    fetch('http://localhost:3001/jobs')
    .then(response => { if (!response.ok)
      { throw Error("Network request failed") }
      return response;
    })
    .then(jobs => jobs.json())
    .then(jobs => {
      this.setState({
        response: jobs
      })
    }, () => {
      this.setState({
        requestFailed: true
      })
    })
  }

  render() {
    if (this.state.requestFailed) return <p>Failed!</p>
    if (!this.state.results) return <p>Loading...</p>
    return (
      <div> this.state.response.map(item => <h1>{item}</h1>)
      </div> 
    )
  } 
}

export default FetchConnectApi;

数据通过：

State

响应：Array [2] 0：{…} job_class：“ class” job_client：“ client” job_contractor：“ contractor” job_created：“ created” job_details：“ details” job_due：“ due” job_files：“文件” job_id：1 job_name ：“ George 123” job_status：“状态” 1：{…} job_class：“ KYC” job_client：“ Ashgrovecompliance” job_contractor：“ d” job_created：“ 09/02/2018” job_details：“再次测试API” job_due：“ 12 / 02/2018“ job_files：” d“ job_id：2 job_name：”修改过的乔治测试“ job_status：” d“

Answer 1

您正在将response数组重置为一个对象。

this.setState({
  response: jobs
})

你可能要push到数组，如果这就是你要使用的东西。 并且由于您正在使用map ，因此您似乎想要一个数组。 另外，您想用{}将js括在jsx中，以便将其读为js。