react jquery方式擷取api資料介面

標籤：jquer   amount   err   com   mock   turn   body   ror   his   

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資料介面