antd Datepicker组件——date.clone is

场景：

在给同事排查问题的时候，一个表单数据回显的功能，因为有个时间组件，导致在赋值的时候报错，如下图这样

image.png

原因

Datepicker 组件表单赋值的时候，接收Moment格式数据。
直接传递个字符串时间格式是有问题的如

const objData = {
  username: '张三',
  age: 24,
  times: '2023-02-22'
};
basicRef.current.setFieldsValue(objData)

正确的情况下应该转换成Moment格式，在给表单赋值

const objData = {
  username: '张三',
  age: 24,
  times: '2023-02-22'
};
objData.times = moment(objData.times);
basicRef.current.setFieldsValue(objData)

这里是引入了moment插件进行转换的 http://momentjs.cn/

完成代码示例：

import React, { useRef } from 'react';
import { Button, Form, Input, DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const basicRef: any = useRef(null);

  const detailsFn = () => {
    const objData = {
      username: '张三',
      age: 24,
      times: '2023-02-22'
    };
    objData.times = moment(objData.times);
    basicRef.current.setFieldsValue(objData)
  };


  return (
    <div>
      <div>
        <Form
          name="basic"
          ref={basicRef}
        >
          <Form.Item label="姓名" name="username">
            <Input />
          </Form.Item>

          <Form.Item label="年龄" name="age">
            <Input />
          </Form.Item>

          <Form.Item label="日期" name="times">
            <DatePicker />
          </Form.Item>
        </Form>
      </div>

      <Button type="primary" onClick={detailsFn}>回显数据测试</Button>
    </div>
  )
};

export default App;

不用表单进行赋值的情况下

部分情况这样展示即可

<DatePicker value={moment('2023-02-22')} style={{ width: 300 }} />
<DatePicker defaultValue={moment("2023-02-22", 'YYYY/MM/DD')} style={{ width: 300 }} />