Question

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

这是我目前所拥有的，但是我得到了一个＆＃39;项目＆＃39;未定义错误。

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

响应：阵列[2] 0： {...} job_class：＆＃34;类＆＃34; job_client：＆＃34;客户机＆＃34; job_contractor：＆＃34;承包商＆＃34; job_created：＆＃34;创建＆＃34; job_details：＆＃34;细节＆＃34; job_due：＆＃34;由于＆＃34; job_files：＆＃34;文件＆＃34; JOB_ID： 1 JOB_NAME：＆＃34;乔治123＆＃34; 工作状态：＆＃34;状态＆＃34; 1： {...} job_class：＆＃34; KYC＆＃34; job_client：＆＃34; Ashgrovecompliance＆＃34; job_contractor：＆＃34; d＆＃34; job_created：＆＃34; 09/02/2018＆＃34; job_details：＆＃34;再次测试API＆＃34; job_due：＆＃34; 12/02/2018＆＃34; job_files：＆＃34; d＆＃34; JOB_ID： 2 JOB_NAME：＆＃34;乔治测试修改＆＃34; 工作状态：＆＃34; d＆＃34;

Answer 1

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

this.setState({
  response: jobs
})

如果你想要使用它，你可能想要push到数组上。由于您使用的是map，因此您似乎需要一个数组。此外，您希望将js与{}括起来，以便将其作为js读取。

在React中使用来自API的数据使用fetch（）

1 个答案: