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報錯問題怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。