关于使用ProTable中的DatePicker出现的日期格式转
2024-04-08 本文已影响0人
贺贺v5
背景
使用@ant-design/pro-components包中的ProTable组件，展示带搜索区域的表格。
遇到的问题
问题1：点击列设置中的某一列报错：
- 问题描述：
Something went wrong. Minified Reacterror #185; visit https:/reactis.org/docs/error-deoderhtml?invariant=185 for the full message or use the non-minified dev environment for fulerrors and additional helpful warnings.
image.png
image.png
- 解决办法：升级
@ant-design/pro-components的版本为：2.5.11 - 问题原因：
image.png
，详情点击这里
问题2：点击搜索区域中的日期区间组件报错：clone.weekday is not a function
-
问题描述：
image.png
在测试过程中发现了一个比较有意思的bug问题，我们使用的是antd中的DatePicker组件，当时间选择框存在已经设定的初始值后,点击时间选择框直接报错,但是当清除内容或者处于新建没有默认值的情况下，组件可以正常运行。
以下是报错信息:
image.png
- 背景
我一开始是，本机和测试环境都正常，只有线上环境会报上面的错。
找到环境：本机：node 16 线上node12.
于是我把本机node降为12.18.0。在不断的修改@ant-design/pro-components的版本，有的就可以在本机复现这个bug，有的版本不行。 - 解决办法
- 添加antd-dayjs-webpack-plugin插件引入
只需要安装依赖后，在webpack配置中添加相关的插件即可
// webpack-config.js 注意一定是这个文件，在webpack.base.config.js中不行
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';
module.exports = {
// ...
plugins: [new AntdDayjsWebpackPlugin()],
};
- 还需要引入dayjs，中英文转化的问题
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 切换为中文 locale
import arraySupport from 'dayjs/plugin/arraySupport';
import timezone from 'dayjs/plugin/timezone';
import toArray from 'dayjs/plugin/toArray';
dayjs.extend(timezone);
dayjs.extend(arraySupport);
dayjs.extend(toArray);
dayjs.tz.setDefault('Asia/Shanghai');
dayjs.locale('zh-cn');
-
问题原因
-
image.png
可以查看[这里](替换 Moment.js - Ant Design
image.png
-
最后
关于具体造成问题的原因，从issue下面的回复有人提到是因为在node_modules中存在了两个dayjs，一个是原本通过npm或yarn引入的dayjs依赖，另一个存在于rc-picker中的依赖(也就是antd引入的时间相关的组件模块)，但是看了官方修复也只是把原先引入的固定版本的dayjs转变成了一个更加广泛的1.x版本，并没有删除这个依赖，所以目前还不是很清楚出现这个问题的根本原因(继续探索中。。。)
