React快速开发迷你记账簿------day05 静态类型的检查和改造

本文链接：https://blog.csdn.net/qq_35812380/article/details/83542366

day 05 静态类型的检查和改造

本节目标:学会使用静态类型检查语法

为了保证获取到数据类型的正确性,应该进行静态类型(int 型 or float型)的检查

在Record.js文件中导入PropTypes库(这是个静态检查的库)
import React, { Component } from 'react'
import PropTypes from 'prop-types' //添加这一行导入静态检查的库

class Record extends Component {
    ...
}
export default Record

Record.propTypes = {
    id:PropTypes.number,
    date:PropTypes.string,
    title:PropTypes.string,
    amount:PropTypes.number
}
Record.propTypes = {
    id:PropTypes.number,
    date:PropTypes.string,
    title:PropTypes.string,
    amount:PropTypes.number
}
因为id,date,title,amount类型是数字,字符串,字符串,数字类型,所以使用上面的方法进行静态类型检查.

看下浏览器的Console

这里意思是: 期待一个number类型的,但是传递的是string类型

出现这种问题我们可以更改mocapi的数据为string类型

满足多方约束,有些情况下就是会传number类型

回到控制台,发现不报错了,然后就解决了这个问题

将Records.js中代码优化

改为这种形式

import React, { Component } from 'react';
import PropTypes from 'prop-types' ;//添加这一行导入静态检查的库
export default class Record extends Component {
    render() {
        return (
            <tr>
                <td>{this.props.date}</td>
                <td>{this.props.title}</td>
                <td>{this.props.amount}</td>
            </tr>
        )
    }
}

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

回到Records.js文件

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

为了解决测试数据都是同一个地址,在多人项目中应该是多个api地址所以使用环境变量将其重构,统一放到一个文件中,更好的管理起来.

用环境变量代替这个地址,不要让api地址成为写死的状态.
查看creat-app的脚手架文档,发现创建环境变量是以REACT_APP_开头
创建文档src/utils/RecordsAPI.js

export const api = process.env.REACT_APP_RECORDS_API_URL ||"http://localhost:5000"

创建环境变量,然后将他导出,默认访问一个不存在的地址,5000

回到Records.js

将其导入并改名RecordsAPI

* :导出所有

as:改名为RecordsAPI

../:是上级目录(找API的地址

...
import * as RecordsAPI from '../utils/RecordsAPI'
class Records extends Component {
...

使用:将原来的api地址改为RecordsAPI.api如下

...
componentDidMount() {
    axios.get(RecordsAPI.api)//改动这行
      .then(response =>
        this.setState({
          records: response.data,
          isLoaded: true
        }),
      ).catch(error => this.setState({
        isLoaded: true,
        error
      })
      )
  }
  ...

说明这样导入是没有问题的 ,此时打开控制台会发现,出错了,默认访问了5000端口

将其修改为,刷新页面正常

export const api = process.env.REACT_APP_RECORDS_API_URL || "https://5bd5b2e79325280013d28897.mockapi.io"

重构代码

在根目录创建文件:.env.development.local

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

src/components/Records.js

  import React, { Component } from 'react';
  import Record from './Record';
  // 1.使用axios库
  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;
      /*     //相当于这样写法
          const error = this.state.error;
          const isLoaded = this.state.isLoaded;
          const records = this.state.records; */
  
      //如果error 存在return   div    Error  显示error 的值
      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>
                {/* 
                  {...record} 扩展写法相当于
                  {id:record.id}  {date:record.date} {title:record.title}     ....
                  */}
                {/* {this.state.records.map((record) => <Record key={record.id} record={record} />)} */}
                {records.map((record) => <Record key={record.id} {...record} />)}
                {/* <Record  /> */}
              </tbody>
            </table>
          </div >
        );
      }
    }
  }
  export default Records;

src/utils/RecordsAPI.js

  import axios from 'axios';
  const api = process.env.REACT_APP_RECORDS_API_URL || "https://5bd5b2e79325280013d28897.mockapi.io"
  
  export const getAll = () =>
    axios.get(`${api}/api/v1/records`)

.env.development.local

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

https://github.com/lenvo222/05_proptypes.git