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

react 基础实践篇-小型财务系统 #5 静态类型检查和改造 API url

下载源码hfpp2012发布于React2938 次点击播放时长:12:30
4

注意:当运行 yarn start 的时候,要传环境变量的时候,视频中没有提到过 windows 的情况, windows 传环境变量应该类似下面这么做:

windows平台:不能直接使用环境变量, 步骤如下:

  1. npm install cross-env --save-dev

  2. 命令改为

"start": "cross-env REACT_APP_RECORDS_API_URL=https://5a637781f2bae00012ca1a18.mockapi.io/api/v1/records react-scripts start"

环境变量问题,如果实在解决不了,就建议写死地址就好了,用上面的地址就可以,不用考虑太多,跳过

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

诱人的 react 视频教程 - 基础篇 #6 通过 Props 传递数据: https://www.rails365.net/movies/you-ren-de-react-shi-pin-jiao-cheng-ji-chu-pian-6-tong-guo-props-chuan-di-shu-ju

src/utils/RecordsAPI.js

import axios from 'axios';
const api = process.env.REACT_APP_RECORDS_API_URL || "https://5a54227777e1d20012fa0723.mockapi.io"

export const getAll = () =>
  axios.get(`${api}/api/v1/records`)

.env.development.local

REACT_APP_RECORDS_API_URL=https://5a54227777e1d20012fa0723.mockapi.io

src/components/Record.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Records extends Component {
  render() {
    return (
      <tr>
        <td>{this.props.date}</td>
        <td>{this.props.title}</td>
        <td>{this.props.amount}</td>
      </tr>
    );
  }
}

Records.propTypes = {
  id: PropTypes.number,
  date: PropTypes.string,
  title: PropTypes.string,
  amount: PropTypes.number
}

src/components/Records.js

import React, { Component } from 'react';
import Record from './Record';
import * as RecordsAPI from '../utils/RecordsAPI'

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

  componentDidMount() {
    RecordsAPI.getAll().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;
21 条回复
  • 菜菜
    cryjay2012 #1

    你怎麼轉載別人的視頻全下架了

  • hfpp2012
    hfpp2012 #2

    不要了,只放原创视频

  • cfkxzsat
    cfkxzsat #3

    "start": "cross-env REACT_APP_RECORDS_API_URL=https://5a637781f2bae00012ca1a18.mockapi.io/api/v1/records react-scripts start"这个命令怎么改啊?求教

  • BaoXiaoShuai
    BaoXiaoShuai #4

    老师,目前我的疑问是,react可以像vue那样在mainjs中把axios的基础地址写上吗?

  • hfpp2012
    hfpp2012 #5

    可以,axios 支持写默认地址的,也许这种方式更好,在“React & Redux 实现注册登录认证系统” 这个项目中有提到

  • tzh1247
    tzh1247 #6

    Records.propTypes = {
    id: PropTypes.number,
    date: PropTypes.string,
    title: PropTypes.string,
    money: PropTypes.number
    }

  • tzh1247
    tzh1247 #7

    我这样写,为啥不起作用

  • tzh1247
    tzh1247 #8

    从前面几课一直看下来,能通过API获取数据并展示,就是卡这里了

  • hfpp2012
    hfpp2012 #9
    tzh1247 tzh1247 #10 回复

    报了啥错,import PropTypes from 'prop-types'; 这样是不是没引用到

  • tzh1247
    tzh1247 #10

    不报错。就是不生效

  • tzh1247
    tzh1247 #11

  • hfpp2012
    hfpp2012 #12
    tzh1247 tzh1247 #10 回复

    你应该是不明白 PropTypes 的作用吧,建议看我之前的视频介绍 React 进阶提高 #14 defaultProps 和 类型检查 PropTypes part 1

  • wl960127
    wl960127 #13
    tzh1247 tzh1247 #10 回复

    我是也引用了 但是一直没报错,后来F12,才发现Console其实已经提示了

  • hfpp2012
    hfpp2012 #14
    wl960127 wl960127 #10 回复

    这些不是会报错,就是你的类型不对,会在 console 里提示警告,因为类似对了,所以什么也没发生

  • javaor
    javaor #15

    src/components/Record.js 这个视频下面的示例代码写错了,Records应该是Record

  • hfpp2012
    hfpp2012 #16
    javaor javaor #10 回复

    后面的课程好像有改正

  • hfpp2012
    hfpp2012 #17
    twoheart twoheart #10 回复

    它那边这两天刚出的问题,证书过期

  • twoheart
    twoheart #18

    跳过的意思是不是 windows 在 package.json 中添加环境变量报错、无法执行不用管?只(应该)在 .env.development.local 中修改环境变量?

  • hfpp2012
    hfpp2012 #19
    twoheart twoheart #10 回复

    哦,那就可以

  • hfpp2012
    hfpp2012 #20
    twoheart twoheart #10 回复

    比较好的方法是在 .env.development.local 这样的文件中添加或修改环境变量,还有 mockapi.io 这个网站好像证书过期,访问不了,等他恢复吧

  • twoheart
    twoheart #21
    hfpp2012 hfpp2012 #10 回复

    嗯,昨天按课程试的时候 mockapi 是完全无法访问的,用回了 json-server ,能保证完成课程知识点。
    今天提示证书过期,其实也可以访问到 http 格式的 api 路径。

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

加我微信:15014006126

支付宝付款
友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852
相似的视频
react 基础实践篇-小型财务系统 #8 更新 Record

react 基础实践篇-小型财务系统 #8 更新 Record

免费播放时长:20:41

4779 次点击

react 基础实践篇-小型财务系统 #10 统计金额(完结)

react 基础实践篇-小型财务系统 #10 统计金额(完结)

免费播放时长:09:29

2905 次点击

react 基础实践篇-小型财务系统 #1 简介

react 基础实践篇-小型财务系统 #1 简介

免费播放时长:04:12

19616 次点击

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

Top