使用Refine+Antd Form集成DatePicker时渲染失败原因排查

核心原因 #

Refine 的 useForm 会自动从接口拉取数据并注入到 formProps.initialValues 中。你在 Form.Item 里单独设置 initialValue 时，会和 useForm 管理的表单状态产生冲突——useForm 可能已将接口返回的日期字符串转换为内部处理对象，你再用 dayjs 二次转换，导致最终传给 DatePicker 的值不是合法的 dayjs 对象，触发了 isValid 方法调用报错。

解决方法 #

方法1：移除 Form.Item 的 initialValue，让 useForm 统一处理日期转换 #

在 useForm 调用时，通过 transformValues 配置项将接口返回的日期字符串转换成 dayjs 对象，确保表单初始值统一合法：

const { saveButtonProps, formProps, formLoading, queryResult } = useForm({
  transformValues: (values) => {
    return {
      ...values,
      reportDate: values.reportDate ? dayjs(values.reportDate) : undefined,
    };
  },
});

修改对应的 Form.Item，删除 initialValue 配置：

<Form.Item name="reportDate" label="Report Date">
  <DatePicker placeholder="Report Date" />
</Form.Item>

方法2：禁用 useForm 默认初始值注入，手动管理初始值 #

如果需要完全手动控制初始值，可关闭 useForm 的自动初始值注入，从 queryResult 中获取数据转换后传给表单：

const { saveButtonProps, formProps, formLoading, queryResult } = useForm({
  defaultValues: false, // 禁用自动注入初始值
});

// 手动处理初始值
const initialValues = useMemo(() => {
  if (!queryResult.data) return {};
  return {
    ...queryResult.data,
    reportDate: dayjs(queryResult.data.reportDate),
  };
}, [queryResult.data]);

在 Form 组件上手动传递处理后的初始值：

<Form {...formProps} layout='vertical' initialValues={initialValues}>
  {/* 其他表单项 */}
  <Form.Item name="reportDate" label="Report Date">
    <DatePicker placeholder="Report Date" />
  </Form.Item>
</Form>

方法3：用 Form.Item 的 getValueProps 处理值转换 #

如果不想修改 useForm 配置，可在 Form.Item 中通过 getValueProps 自动转换表单值为 DatePicker 可识别的 dayjs 对象：

<Form.Item 
  name="reportDate" 
  label="Report Date"
  getValueProps={(value) => ({
    value: value ? dayjs(value) : undefined,
  })}
>
  <DatePicker placeholder="Report Date" />
</Form.Item>

验证逻辑 #

你之前的测试已经确认：单独使用 DatePicker 传入转换后的 dayjs 值正常，普通输入框也能正常显示数据，说明问题根源是 useForm 的状态管理与 Form.Item 手动设置 initialValue 的冲突。只要保证表单初始值是合法的 dayjs 对象，即可解决报错。

内容的提问来源于stack exchange，提问作者JDS