在reactjs中获取后如何显示响应数据

如何解决在reactjs中获取后如何显示响应数据

我正在尝试使用fetch（）方法获取json数据，并使用reactjs在网页上显示它。到目前为止，以下代码在控制台中打印数据，但我需要在网页上进行相同类型的输出。如何在页面上显示？

import React from 'react';


export default class PersonList extends React.Component {
  componentDidMount() {
    fetch(`http://localhost:3000/api/testing2`)
    .then((response) => response.json())
    .then((data) => console.log('This is your data',data));
  }
  render() {
    return<h1>my Component has Mounted,Check the browser 'console' </h1>;
  }

}

控制台输出（需要此输出在网页上，还需要将其定义为const / let / var /，以便我可以访问键值以作进一步的用途）：

这是您的数据（22） ，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}] / p>

解决方法

在PersonList类中，定义一个状态，并在以这种方式获取人员数据后更新该状态，然后呈现该数据，

export default class PersonList extends React.Component {
    state = {
       persons: [],}

    componentDidMount() {
       fetch(`http://localhost:3000/api/testing2`).then((response) => response.json()).then((data) => {
          console.log('This is your data',data)
          this.setState({ persons: [...data]});
       });
    }

    render() {
       return (
           <>
               <h1>my Component has Mounted,Check the browser 'console' </h1>
               {this.state.persons.length && this.state.persons.map((person) => <li>{JSON.stringify(person)}</li>)}
           </>
       );
    }

}

,

另一种方法可能是以下方法。这将在数​​组的每个索引中为您提供[key：value]对。

export default class PersonList extends React.Component {
        state = {
           persons: [],}
        componentDidMount() {
           fetch(`http://localhost:3000/api/testing2`).then((response) => response.json()).then((data) => {
              console.log('This is your data',data)
              let mydata = [];
              data.map(row=>{
                Object.keys(row).map(key=>{
                  mydata.push({key,value:row[key]})
                })
              })
              this.setState({ persons: mydata });
           });
        }
        render() {
           return (
               <>
                   <h1>my Component has Mounted,Check the browser 'console' </h1>
                   <ul>
                   {this.state.persons.length && this.state.persons.map((person) => <li>Key is {person.key} and value is {person.value}</li>)}
                   </ul>
               </>
           );
        }

    }

另一种方法是将键值对存储在人员对象中，然后使用所需的任何键进行访问。假设您在API返回的数据的每个对象中都有唯一的键。

export default class PersonList extends React.Component {
        state = {
           persons: {},data)
              let mydata = {};
              data.map(row=>{
                Object.keys(row).map(key=>{
                  mydata[key] = row[key]
                })
              })
              this.setState({ persons: mydata });
           });
        }
        render() {
           return (
               <>
                   <h1>my Component has Mounted,Check the browser 'console' </h1>
                   <ul>
                   {Object.keys(this.state.persons).map((key) => <li>Key is {key} and value is {this.state.persons[key]}</li>)}
                   </ul>
               </>
           );
        }

    }