在测试过程中发现了一个比较有意思的bug问题,我们使用的是antd中的DatePicker组件,当时间选择框存在已经设定的初始值后,点击时间选择框直接报错,但是当清除内容或者处于新建没有默认值的情况下,组件可以正常运行。
(以下是使用的时间范围组件展示)
在这里插入图片描述
(以下是报错信息)
在这里插入图片描述
我们在项目中使用的dayjs替换moment,原因在于moment体积太大了,而我们只需要使用其中的一些比较简单的功能,所以选择了更加轻量级的时间库。

按照antd官方提供的替换moment.js的方法

https://ant.design/docs/react/replace-moment-cn#DatePicker

创建自定义时间组件
经过测试通过这种方式导出时间组件后,调用时使用dayjs不会出现报错信息,并且功能可以正常使用

// 以DatePicker组件为例,因为项目中目前只用到了DatePicker组件的缘故
// src/components/DatePicker.tsx

import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';
import 'antd/es/date-picker/style/index';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

export default DatePicker;

但是会存在原先的中文格式转变成了英文的格式,目前还没有找到可以修改这个单独组件中英文的方式(尝试单独引入中文并且在组件中添加locale没有起作用,并且全局设定的locale对自定义导出的这个时间组件也不起作用)
(使用自定义组件前)
在这里插入图片描述
(使用自定义组件后)
在这里插入图片描述
(所以如果对于中英文显示的问题不是很关心,可以使用该方法进行替换)

antd-dayjs-webpack-plugin插件引入
只需要安装依赖后,在webpack配置中添加相关的插件即可

// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};

这种方法实现起来很简单,但是就目前来看,实际的使用并不能解决点击后报错的问题,在非TS项目中应该是有效果的(具体未测试),但是在项目中引入了TS之后,我添加了依赖以及webpack配置后,依旧是原先的报错,插件的引入并没有起到效果,所以这个方案可能不如第一种

自定义导出dayjs
这个方式之所以放在最后,是因为这个并不是官方提供的解决方案,而是在官方issue中,相关问题下面有人提供的一个解决思路,并且在使用过后发现可以完美的解决第一种因为自定义导出而造成的中英文转换问题,并且相比于第一种自定义导出DatePicker组件的方式,这种方法更加的简单方便,所以我个人非常推荐使用这种方法来解决我们的问题。

issue问题链接
(解决方案,可以看到这个解决方案受到了非常多的认可!)
在这里插入图片描述

// src/components/dayjs
import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';

dayjs.extend(weekday);
dayjs.extend(localeData);

export default dayjs;


// 其他组件文件中(@已经进行过配置,默认定位到项目中的src目录)
import dayjs from '@/components/dayjs';

(中英文显示问题以及点击报错都已解决)
在这里插入图片描述
最后:
关于具体造成问题的原因,从issue下面的回复有人提到是因为在node_modules中存在了两个dayjs,一个是原本通过npm或yarn引入的dayjs依赖,另一个存在于rc-picker中的依赖(也就是antd引入的时间相关的组件模块),但是看了官方修复也只是把原先引入的固定版本的dayjs转变成了一个更加广泛的1.x版本,并没有删除这个依赖,所以目前还不是很清楚出现这个问题的根本原因(继续探索中。。。)

issue: form.setFieldsValue 之后再去选择日期 出错clone.weekday is not a function #26190
在这里插入图片描述在这里插入图片描述
(不知道更新了antd-dayjs-webpack-plugin插件后是否起作用,因为项目中目前的antd版本是4.16.13,所以这个方案没有尝试)

在这里插入图片描述
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐