reactjs – 如何使用fetch get方法从服务器检索数据并将其显示在表中

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Link } from 'react-router'

class Beacons extends Component {

  constructor() 
    {
        super();
        console.log("componentDidMount running");
        this.state = {
            data:[
                {name:"Nikko Laus1" , beacon:"" ,button:"Edit Beacon"},
                {name:"Sam Collins", beacon:"",button:"Edit Beacon"},
                {name:"Carl Smith Wesson", beacon:"",button:"Edit Beacon"},
                {name:"Peter Austin", beacon:"",button:"Edit Beacon"},
                {name:"Peter Austin", beacon:"",button:"Edit Beacon"},
                {name:"Tini Titus", beacon:"",button:"Edit Beacon"},
                {name:"Sarra Cams", beacon:"",button:"Edit Beacon"}    
            ]
        };

       fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons",{ 
     headers: { 
     'Accept': 'application/json, application/xml, text/plain, text/html, *.*', 

     'Content-Type': 'application/json' 
     }, 
     method : 'GET'
     }) 
     .then(function(response) { 
     console.log("response") 
     console.log(response) 
     return response.json(); 
     }) 
     .then(function(data) { 
     console.log("data") 
     console.log(data) 
     }) 
     .catch(function(error){ 
     console.log("error") 
     console.log(error)   
     });
     
    }

    componentDidMount(){
      console.log("hello");
    }

static contextTypes = {
  router: React.PropTypes.object.isRequired
}
handleSubmit(event){

    this.context.router.push('/components/NewBeacon');
  }



  render() {
    
        let rows = this.state.data.map(person =>
        {
            return <TableRow key={person.id} data={person}/>
        });

        return (<div><div className="row float-right">
      <button className="nav-link btn btn-block btn-success" onClick={this.handleSubmit.bind(this)} >
       Add a new Beacon </button>
      
      
      </div><br/><br/>
      <div className="animated fadeIn">
            <br /><div className="card" style={{ width: 75 + '%' }}>
              <div className="card-header">
                <i className="fa fa-align-justify"></i> Manage Information
              </div>
              <div className="card-block">

      <table  className="table table-hover table-outline mb-0 hidden-sm-down">
            <thead className="thead-default">
        <tr>
            <th className="text-center">Name</th>
            <th className="text-center">Beacon</th>
            <th className="text-center">Edit Beacon</th>
        </tr>
        </thead>
                <tbody>{rows}</tbody>
            </table></div>
</div>
</div>
</div>
            );
    }
}

class TableRow extends React.Component
{
    constructor()
    {
        super();
    }

    render()
    {
        return (<tr>
                    <td className="text-center">{this.props.data.name}</td>
                    <td className="text-center">{this.props.data.beacon}</td>
                    <td className="text-center"><center><Link to={'/Components/EditBeacon'} style= {{ width: 40 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">
       {this.props.data.button}</Link></center></td>
                </tr>
            );
    }
}


ReactDOM.render(
  <Beacons />,
  document.getElementById('root')
);

export default Beacons;

我在这个页面上做了一个表
现在我想点击api,从该api获取的结果将显示在此页面上的表格中
要使用get方法调用api调用的API,其结果将以表格形式显示

fetch(`https://www.reddit.com/r/dogs.json`)
.then(response => {
        return response.json();
})
.then(json => {
    // doSomeThing(json.someProperty)
    // this.setState({jsonData: json});
})
.catch((error) => {
    // AHHHH! An Error!
});

您必须根据您拥有的数据类型(.json(),. blob()等等)从获取响应中获取数据. Using Fetch

在第二个.then()中,您实际上可以设置状态,将有效负载分配到您的商店,或以某种方式处理它,您的组件将接收它.在上面的示例中,您将呈现从jsonData获得的任何内容.