Reactjs React解析来自API的对象数组

我是react的新手，我正在尝试使用API，我得到了这个响应。我需要遍历数组并在表中显示元素：

{
  "people": [
    {
      "id": "1",
      "name": "philip",
      "age": 25,
      "timestamp": "2020-10-17T21:59:50.151"
    },
    {
      "id": "2",
      "name": "philip2",
      "age": 26,
      "timestamp": "2020-10-17T21:59:50.152"
    },
    {
      "id": "3",
      "name": "philip3",
      "age": 27,
      "timestamp": "2020-10-17T21:59:50.153"
    },
  ]
}

我正在点击api并从中得到正确的响应，但是我在尝试解析它时遇到了一些问题

import React, { Component } from 'react';
import "./App.css";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            people: []
        }
    }

    componentDidMount() {
        fetch('/local/api/people')
            .then(res => res.json())
            .then(json => json.people)
            .then(people => this.setState({'people': people}))
    }

    render() {
        return (
            <div className="App">
            {this.state.people}

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
人：[]
}
}
componentDidMount（）{
获取（“/local/api/people”）
.then（res=>res.json（））
.then（json=>json.people）
.then（people=>this.setState（{'people'：people}））
}
render（）{
返回(
{这个州，人民}

在这里，我需要遍历数组并显示所有元素

            </div>
    );
    }
}

export default App;


Error: Objects are not valid as a React child (found: object with keys ....... If you meant to render a collection of children, use an array instead.

);
}
}
导出默认应用程序；
错误：对象作为React子对象无效（找到：具有键的对象……。如果要呈现子对象集合，请改用数组。

---

我尝试了很多方法，但到目前为止没有任何效果

您必须像下面的代码一样映射到返回中的数组，我正在传递一个键，这是一种识别元素的方法

键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识：

我还在检查组件渲染时，我只会在state people数组长度为true时显示列表，这意味着不是0

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      people: [],
    };
  }

  componentDidMount() {
    fetch("/local/api/people")
      .then((res) => res.json())
      .then((json) => json.people)
      .then((people) => this.setState({ people: people }));
  }

  render() {
    return (
      <div className="App">
        {this.state.people.length && this.state.people.map((element, key) => {
          return (
            <div key={key}>
              <span>{element.id}</span>
              <span>{element.name}</span>
              <span>{element.age}</span>
              <span>{element.timestamp}</span>
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
人员：[]，
};
}
componentDidMount（）{
获取（“/local/api/people”）
.然后（（res）=>res.json（））
.then（（json）=>json.people）
.then（（people）=>this.setState（{people:people}））；
}
render（）{
返回(
{this.state.people.length&&this.state.people.map（（元素，键）=>{
返回(
{element.id}
{element.name}
{element.age}
{element.timestamp}
);
})}
);
}
}
导出默认应用程序；

您可以创建一个成员函数，该函数映射到数组，并为每个表行创建并返回jsx。然后您可以在表体标记中调用该函数

renderTableData() {
    return this.state.people.map((person, index) => {
      const { id, name, age } = person //destructuring
      return (
          <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{age}</td>
          </tr>
      )
    })
  }

 render() {
    return (
      <div className="App">
          <table id='people'>
            <tbody>
                {this.renderTableData()}
            </tbody>
          </table>
      </div>
    )
  }

renderTableData（）{
返回this.state.people.map（（person，index）=>{
const{id，name，age}=person//解构
返回(
{id}
{name}
{age}
)
})
}
render（）{
返回(
{this.renderTableData（）}
)
}

this.state.people.map（…）

？这不是解析，fetch在调用.json时已经为您完成了解析。请参阅。