场景：
在给同事排查问题的时候，一个表单数据回显的功能，因为有个时间组件，导致在赋值的时候报错，如下图这样
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 }} />
