项目开发过程中遇到的问题

1. 如何进入默认路由

{
    path: '/dashboard',
    element: <Layout></Layout>，
    children: [
        //添加一个path为空的二级路由
        {
            path: '',
            element: <Navigate to="console"></Navigate>
        },
        {
            path: 'console',
            element: <Console></Console>
        }
    ]
}

2. 表单自定义验证器

Antd5 中返回Promise

//定义验证密码的规则
const checkPw = (rule, value) => {
  if (value.length === 0) {
    return Promise.reject("密码不能为空")
  }
  if (/^[\da-z]{3,8}$/.test(value)) {
    return Promise.resolve()
  } else {
    return Promise.reject("密码应该是3-5位的数字或小写字母")
  }
}
...
<Form.Item
    label="密码"
    name="pw"
    rules={[
           { validator: checkPw }
           ]}
    >
    <Input.Password />
</Form.Item>

3. Antd5中message 的Hook用法

https://mp.youkuaiyun.com/mp_blog/creation/editor/129176794

4. 删除tabs项目时，无法在dispatch后获取最新activeKey

解决方案： 组件监听activeKey的变化

useEffect(()=>{
    if (isCurrent){
        navigate(activeKey)
    }
},[activeKey])

5. Tabs标签页的处理

https://mp.youkuaiyun.com/mp_blog/creation/editor/129361881

• 删除当前项后，让后一个作为当前项，并路由跳转

• 删除最后一项时，如果是当前项，则让前一个作为当前项，如果不是当前项，则只删除

• 第一项默认项不显示删除功能

6. Antd5 日期数据的特殊处理

不能再使用moment库，会出现bug, 要使用dayjs库处理时间

import dayjs from 'dayjs'

• 从表单获取后要用dayjst转换后才能传给后台

  dayjs(日期).format("YYYY-MM-DD")

• 从后台拿到的数据要dayjs处理后才能显示在表格中

  dayjs(日期).format("YYYY-MM-DD")

• 在编辑班级中数据回显时，要用deyjs先处理

  dayjs(日期)

• 也可以在DatePicker上添加事件,自动转换

  const onChange = (value,dateString)=>{
      // value为原值， dateString为转换后的日期
  }
  ...
  <DatePicker onChange={onChange}/>

7. 在第一页添加班级后，页面不更新

原因： 监听page变化才重新请求数据，但page值没变化

解决方案： 设置一个状态，每次添加后让状态取反，并在监听page的同时监听这个状态，这样只要是添加班级就可以触发数据请求

8. 删除班级的边界处理

• 删除最后一页唯一的一条数据时，再拉取数据，页码要减1

//判断当前删除的是否为最后一页唯一的一条,
  const isEnd = () => {
    //算法思路： 计算最后一页（当前页）第一条是总条数里的第几个，如果数值和total相等，即为最后一页唯一的一条
    // 13 
    return total === (page - 1) * 4 + 1
  }
  //删除班级
  const onDelete = async (classId) => {
    let res = await _delClass({
      classId
    })
    console.log(res);
    let { code } = res.data
    if (code === 0) {
      message.success("删除成功")
      //判断当前删除的是否为最后一页唯一的一条,并且不是所有数据仅剩的一条
      if (isEnd() && total !== 1) {
        setPage(page - 1)
      } else {
        setIsAddAction(!isAddAction)
      }
    } else {
      message.error("删除失败")
    }
  }

• 删除最后剩的一条记录时，要显示暂无数据

 //获取数据
  const getData = async () => {
    let res = await _getClassList({
      page,
      ...search
    })
    let { code, list, total } = res.data
    if (code === 0) {
      setClassList(list)
      setTotal(total)
    } else {
      //没有数据时
      setClassList([])
      setTotal(0)
    }
  }