剧场模式
首页前端react 基础实践篇-小型财务系统

react 基础实践篇-小型财务系统 #4 使用 jQuery 或 axios 请求 API 数据

下载源码hfpp2012发布于React5693 次点击播放时长:16:11
5

注意

有些同学会发现用 chrome 的 console 调试的时候,发起请求,并没有下面这个提示:

在 chrome 的调试工具中,需要简单设置一下,就可以出来这个提示,看下图。

https://github.com/axios/axios

src/components/Records

import React, { Component } from 'react';
import Record from './Record';
import axios from 'axios';

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

  componentDidMount() {
    axios.get("https://5a54227777e1d20012fa0723.mockapi.io/api/v1/records").then(
      response => this.setState({
        records: response.data,
        isLoaded: true
      })
    ).catch(
      error => this.setState({
        isLoaded: true,
        error
      })
    )
  }

  render() {
    const { error, isLoaded, records } = this.state;

    if (error) {
      return <div>Error: {error.message}</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 key={record.id} {...record} />)}
            </tbody>
          </table>
        </div>
      );
    }
  }
}

export default Records;
4 条回复
  • miii
    miii #1

    给大佬笔芯ღ( ´・ᴗ・` )

  • NimoZone
    NimoZone #2


    大佬,为什么我tbody宽度跟table的不一致,css样式用的跟你视频中是同一个

  • twoheart
    twoheart #3

    jQuery 发请求的时候提示跨域

    Access to XMLHttpRequest at 'https://5c340a8fe0948000147a7873.mockapi.io/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    
  • twoheart
    twoheart #4

    明白了,忘记加/records

购买或订阅扫码加我微信
微信二维码

加我微信:15014006126

支付宝付款
友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852
相似的视频

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:31

Top