实现效果:
搭建项目
使用 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.data.todoList;