Javascript 如何进行API调用并使用React将其显示在表中？

我正在尝试制作一个组件，该组件将在表中显示API数据。API托管在heroku上，地址为：以下是API返回的格式示例，以备参考：

[
{"date":"2020-10-16","distance":5,"email":"sampleemail1@gmail.com","location":"sampletown1","name":"testperson","pace":"7","time":"16:00"},
{"date":"2020-10-18","distance":15,"email":"sampleemail2@gmail.com","location":"sampletown2","name":"testperson2","pace":"6","time":"19:00"}
]

当前元件代码将复制并粘贴到以下位置：

import React from 'react';
import './Table.css';

export class ShowAllEvents extends React.Component {


    constructor(props) {
       super(props)
       this.state = {
            events: []
       }
    }

    componentWillMount() {
      const url = "https://protravelete-api.herokuapp.com/getAllEvents"; 
      fetch(url)
      .then(response => response.json())
      .then(content => content) 
      .then(events => {
         console.log(events)
         this.setState(events)
      })
  
      .then(console.log(this.state.events))
    }

 
    renderTableHeader() {
       let header = Object.keys(this.state.events[0])
       return header.map((key, index) => {
          return <th key={index}>{key.toUpperCase()}</th>
       })
    }
 
    renderTableData() {
       return this.state.events.map((events, index) => {
          const {date, distance, email, location, name, pace, time } = events //destructuring
          return (
             <tr key={name}>
                <td>{name}</td>
                <td>{location}</td>
                <td>{date}</td>
                <td>{time}</td>
                <td>{distance}</td>
                <td>{pace}</td>
                <td>{email}</td>
             </tr>
          )
       })
    }
 
    render() {
       return (
          <div>
             <h1 id='title'>All Upcomming Events</h1>
             <table id='events'>
                <tbody>
                   <tr>{this.renderTableHeader()}</tr>
                   {this.renderTableData()}
                </tbody>
             </table>
          </div>
       )
    }
 }
 

从“React”导入React；
导入“/Table.css”；
导出类ShowAllEvents扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
事件：[]
}
}
组件willmount（）{
常量url=”https://protravelete-api.herokuapp.com/getAllEvents"; 
获取（url）
.then（response=>response.json（））
。然后（内容=>content）
。然后（事件=>{
console.log（事件）
this.setState（事件）
})
.then（console.log（this.state.events））
}
renderTableHeader（）{
let header=Object.keys（this.state.events[0]）
返回header.map（（键，索引）=>{
返回{key.toUpperCase（）}
})
}
renderTableData（）{
返回此.state.events.map（（事件，索引）=>{
const{date，distance，email，location，name，pace，time}=events//destructuring
返回(
{name}
{location}
{date}
{time}
{距离}
{pace}
{email}
)
})
}
render（）{
返回(
所有升级事件
{this.renderTableHeader（）}
{this.renderTableData（）}
)
}
}

有人能帮忙吗？我确信我的问题只是愚蠢的错误，我对使用React非常陌生，所以我的代码非常混乱。

使用response.json（）而不是response.text

 componentWillMount() {
  const url = "http://127.0.0.1:5000/getAllEvents"; 
  fetch(url)
  .then(response => response.json())
  .then(contents => console.log(contents))
  .then(events => this.setState(events))

  .then(console.log(this.state.events))
}

---

您忘记了在第二个

thenable

链中返回

响应，该链将undefined返回到第三个
then
<代码>事件

变得未定义。像这样试试

更新：对AJAX调用使用

componentDidMount

renderTableHeader（）{
如果（！this.state.events.length）返回null
const header=Object.keys（this.state.events[0]）//前面，您在这里遇到了错误
返回header.map（（键，索引）=>{
返回{key.toUpperCase（）}
})
}

Hey Glennonr，您是否正在从API调用中获取数据？看起来您应该执行.then（response=>response.json（））而不是.text来解除响应的字符串化。您是否收到任何错误？感谢您的提醒，我更改了componentWillMount函数以反映您的错误，但是我仍然收到一个错误：TypeError:无法将renderTableHeader函数中的undefined或null转换为object，这是因为

renderTableHeader

，您正在执行

let header=object.keys（this.state.events[0]）

在获取数据之前未定义。这就是为什么你看到这个错误更新了我的答案，检查一下。

  componentDidMount() {
    const url = "http://127.0.0.1:5000/getAllEvents"; 
    fetch(url)
    .then(response => response.json())
    // .then(content => content) // This can be optional if you don't map the response
    .then(events => {
       console.log(events)
       this.setState({ events })
    })
  }

renderTableHeader() {
  if (!this.state.events.length) return null
  const header = Object.keys(this.state.events[0]) // Earlier, you're getting error here
  return header.map((key, index) => {
    return <th key={index}>{key.toUpperCase()}</th>
  })
}