为什么在包含 DatePicker 时渲染我的 antd 表单失败？

Question

我有一个组件，可以呈现一个如下所示的简单表单：

const { saveButtonProps, formProps, formLoading, queryResult } = useForm();
return (
  <Form {...formProps} layout='vertical'>
    <Form.Item hidden name="id" />
     
    <....blah blah blah, other form items.../>

    <Row gutter={[32, 32]}>
      <Col span={8}>
        <Form.Item name="reportDate" label="Report Date" initialValue={dayjs(formProps?.initialValues?.reportDate)}>
          <DatePicker placeholder="Report Date" />
        </Form.Item>
      </Col>
    </Row>
  </Form>
)

但是，当我导航到该页面时，没有任何内容呈现，并且出现“date4.isValid 不是函数”的错误。查看堆栈跟踪，它被 PickerInput/hooks/useFieldsInvalidate 抛出，最终跟踪到 rc-picker/es/generate/dayjs.js。

我认为 useForm 发现我想在组件内渲染从服务器返回的 JSON 中的“reportDate”值，并立即将其视为 dayjs 类型对象？如果我将 的控件更改为标准输入之类的内容，则页面呈现得很好并包含我期望的数据。

如果我将 DatePicker 组件放在表单之外，并将其初始值设置为

dayjs(formProps?.initialValues?.reportDate)

，它也会正确设置日期。那么在对 useForm 的调用中我需要做一些额外的事情来让它将返回值转换为其从一开始就明显期望的格式吗？

注意：这一切都是使用Refine框架完成的，因此对useForm的调用来自@refinedev/antd。

Answer 1

想通了。

我没有尝试在initialValue 中进行翻译，而是添加了

getValueProps={(value) => ({ value: value ? dayjs(value) : "", })}

，这样就可以正常工作了。