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;

react jquery方式獲取api數據接口