Ant Design的DatePicker报错问题怎么解决

这篇“Ant Design的DatePicker报错问题怎么解决”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Ant Design的DatePicker报错问题怎么解决”文章吧。

Ant Design 出于设计的考量，某一类型的控件只能接收某一类型的值。比如Input的value为string类型，InputNumber的value为number类型，同样的DatePicker的value则为moment类型。

这样的设计无可厚非，并且还考虑到了日期格式不一致的转换问题，甚至更换日期类库的问题。但实际使用中却存在一些不便利的情况，服务器返回的日期数据基本为字符串类型。官方给出的建议是先对服务器返回的日期数据进行处理，转换为moment类型。但这样无疑增加了代码量，造成使用不便利。

github中有issue讨论过这个问题：4.0.0 form组件使用initialValues 初始化数据，当包含“date”数据时，DatePicker组件报错“date.clone is not a function”

帖中的提问者最后通过自定义组件解决这个问题。这是个不错的思路，这里给出一个更完善的自定义组件代码。这要求服务器返回的日期数据必须是标准的格式，能够直接被moment处理。

import React, {FC} from 'react';
import {DatePicker} from 'antd';
import {DatePickerProps} from "antd/es/date-picker";
import moment from "moment";

const DatePicker2: FC= props => {
  const {value, defaultValue, ...rest} = props;
  const dateValue = value && typeof value === 'string' ? moment(value) : value;
  const defaultDateValue = defaultValue && typeof defaultValue === 'string' ? moment(defaultValue) : defaultValue;
  return;
};
export default DatePicker2

以上就是关于“Ant Design的DatePicker报错问题怎么解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。