使用 React Hooks + mock + antd构建一个完整且漂亮的 todoList

实现效果：

搭建项目

使用 create-react-app 快速创建一个项目，删除不必要的文件，保留文件如下：

目录说明

• index.js - 项目入口文件
• index.less - 样式
• mock.js - 模拟 todo 数据
• TodoList.js - 实现的逻辑文件

在项目中引入 antd，具体方法见 在 create-react-app 中使用 antd

各部分代码展示

mock.js

// 引入 mock 模拟数据
import Mock from 'mockjs'

const Random = Mock.Random

Random.extend({
   
  planInfo: function(date) {
   
    const Info = ["吃饭", "睡觉", "打豆豆"]
    return this.pick(Info)
  }
})

const data = Mock.mock('/fakeData', 'get', {
   
  success: true,
  message: 'success',
  todoList: {
   
    "filter": "SHOW_ALL",
    "list|1-10": [
      {
   
        "id|+1": 1,
        "content": '@planInfo',
        "isDone": Random.boolean(),
        "dataTime": Random.date('yyyy-MM-dd')
      },
    ]
  }
})

export default data

TodoList.js

import React, {
    useState, useEffect } from "react";
import axios from "axios";
import "./mock";

import {
    Input, List, Button, Icon } from "antd";

const {
    Search } = Input;

export default function TodoList() {
   
  //  data - 完整的 todo 数据
  const [data, setData] = useState([]);

  // 在此处请求接口数据并初始化 todoList，
  //  useEffect 传入第二个参数为空数组，使得该 effect 仅执行一次
  useEffect(() => {
   
    (async () => {
   
      const res = await axios.get("/fakeData");
      const {
    list } = res