react jquery方式获取api数据接口

Posted 2020-10-27 sunbey80

import React, { Component } from ‘react‘;
import Record from ‘./Record‘;
import { getJSON } from ‘jquery‘;

class Records extends Component {
  constructor() {
    super();
  
    this.state = {
      error: null,
      isLoaded: false,
      records: []
    };
  }

  componentDidMount() {
    getJSON(‘https://5aa780cb7f6fcb0014ee24aa.mockapi.io/api/v1/records‘).then(
      res => {
        this.setState({
          isLoaded: true,
          records: res
        });
      },
      error => {
        this.setState({
          isLoaded: true,
          error
        })
      }
    )
  }

  render() {
    const { error, isLoaded, records } = this.state;
    if (error) {
      return <div>{ error.responseText }</div>;
    } else if (!isLoaded) {
      return <div>loading...</div>
    } else {
      return (
        <div>
          <h2>Records</h2>
          <table className=‘table table-bordered‘>
            <thead>
              <tr>
                <th>Date</th>
                <th>Title</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tbody>
              {records.map((record) => <Record {...record} key={record.id}/>)}
            </tbody>
          </table>
        </div>
      );
    }

    
  }
}

export default Records;