ant-design版本升级从V4到V5

写这篇文章的目的就是记录自己踩过的坑，没有其他的。 正常情况按照官网给的方式，就可以正常进行版本升级[：](从 v4 到 v5 - Ant Design (antgroup.com))

但是，这里有一个小坑，就是moment使用的时候报错，来看一下报错信息：

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

这个报错信息告诉我们的是setState和useEffect的问题，如果按照这个报错去梳理代码，你会发现，自己的生命周期写的并没有问题。把含有setState和useEffect都是没用， 最后定位是ant.design的组件DatePicker组件默认时间

<RangePicker defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]} format={dateFormat} />

这里明显看到，那自己代码中所使用的是：

initialValue: [
  moment(new Date(), 'YYYY-MM-DD'),
  moment(new Date(), 'YYYY-MM-DD'),
]

那么这两者的区别，也是 很大的，打印log，看两者输出结果：

// moment
1.  _d: Tue Oct 24 2023 11:15:52 GMT+0800 (中国标准时间) {}
1.  _f: "YYYY-MM-DD"
1.  _i: Tue Oct 24 2023 11:15:52 GMT+0800 (中国标准时间) {}
1.  _isAMomentObject: true
1.  _isUTC: false
1.  _isValid: true
1.  _locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: 'Invalid date', _dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/, ordinal: ƒ, …}
1.  _pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
1.  [[Prototype]]: Object


// dayjs
1.    
    $D: 24
1.  $H: 11
1.  $L: "en"
1.  $M: 9
1.  $W: 2
1.  $d: Tue Oct 24 2023 11:15:52 GMT+0800 (中国标准时间) {}
1.  $isDayjsObject: true
1.  $m: 15
1.  $ms: 844
1.  $s: 52
1.  $u: undefined
1.  $x: {}
1.  $y: 2023
1.  [[Prototype]]: Object

这里可以看出所需结构完全不同了，也可以看到RangePicker代码

RangePicker: import("./generatePicker/interface").PickerComponentClass<BaseRangePickerProps<Dayjs> & {
    dropdownClassName?: string | undefined;
    popupClassName?: string | undefined;
    rootClassName?: string | undefined;
}, unknown>;

其中要求的就是Dayjs结构。看到这里其实官网也给了解决方案保留moment，那就是安装

npm install --save-dev @ant-design/moment-webpack-plugin

按照官网给出的信息，我只说一下我这里遇到的问题就是dayjs引入的延申

import weekday from 'dayjs/plugin/weekday'
import localeData from 'dayjs/plugin/localeData'
dayjs.extend(weekday)
dayjs.extend(localeData)

这里会对import的导入进行报错，告诉你这两个文件找不到，具体修改本人没有研究，因为这个是在入口引入，所以不动它，而是去修改的moment。