封装MUI X DatePicker结合React Hook Form提交时报错求助

场景与代码实现 #

我尝试封装MUI X DatePicker为自定义组件，结合React Hook Form使用，具体实现如下：

1. 数据模型与验证 #

定义了IMessage接口及实现该接口的Message类，使用class-validator装饰器做字段验证：

export interface IMessage {
    id?: string | undefined;
    title?: string | undefined;
    content?: string | undefined;
    date?: Date | undefined;
}

export class Message implements IMessage
{
    @IsNotEmpty({ message: "Az cím kötelező mező!" })
    title: string;
    
    @IsNotEmpty({ message: "A tartalom kötelező mező!" })
    content: string;

    @IsDate({ message: "A dátum kötelező mező!" })
    date: Date;
}

2. 表单页面代码 #

页面中构建React Hook Form表单，包含自定义文本输入、多行文本输入及封装后的日期选择组件：

const executeSubmit = (data: Message): void =>
{
    console.log({...data});
}

<form onSubmit={handleSubmit((data: Message) => executeSubmit(data))}>
  <TextEntry
    control={control}
    margin="normal"
    fullWidth
    id="title"
    label="Cím"
    name="title"
    autoFocus
    value={message.title}
  />
  <MultiLineTextEntry
    control={control}
    margin="normal"
    fullWidth
    name="content"
    label="Tartalom"
    type="text"
    id="content"
    value={message.content}
  />
  <DateTimeEntryEntry
    control={control}
    margin="normal"
    fullWidth
    name="date"
    label="Kezdet időpontja"
    id="date"
    value={message.date}
  />
  <Button
    type="submit"
    fullWidth
    variant="contained"
    sx={{ mt: 3, mb: 2 }}
  >
    Mentés
  </Button>
</form>

3. 封装的日期选择组件代码 #

import { DatePickerProps } from "@mui/lab";
import { Control } from "react-hook-form";

export type DateTimeEntryEntryType<TDate extends DatePickerProps<TDate>> = {
  control: Control<TDate, any>;
} & DatePickerProps<TDate>;

import { Controller } from "react-hook-form";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { MultilineTextEntryType } from "src/components/multilineTextEntry/multilineTextEntry.props";
import { DatePicker, DatePickerProps, LocalizationProvider } from '@mui/x-date-pickers';
import dayjs from "dayjs";

export const DateTimeEntryEntry = (props: MultilineTextEntryType<any>): JSX.Element => {
    const { name, control, label } = props;

     return (
        <Controller control={control}
                    name={name}
                    render={
                        ({
                            field: { onChange, value, ref},
                            fieldState: { error }
                        }) =>
                        (
                            <LocalizationProvider dateAdapter={AdapterDayjs}
                                                  adapterLocale="hu-HU">
                                <DatePicker {...props as DatePickerProps<any>}
                                            onChange={onChange}
                                            value={dayjs(value)}
                                            label={label}
                                            inputRef={ref}
                                            disablePast 
                                            className="mui-date-picker"/>
                            </LocalizationProvider>
                    )}
                    defaultValue={props.value}
        />
    );
}

问题现象 #

表单与日期选择组件可正常接收并展示数据，但点击提交按钮时控制台报错，移除Message类的验证装饰器后问题仍存在。

报错栈（中文翻译版） #

在 new M (dayjs.min.js:1:1)
在 TransformOperationExecutor.transform (TransformOperationExecutor.ts:160:1)
在 _loop_1 (TransformOperationExecutor.ts:333:1)
在 TransformOperationExecutor.transform (TransformOperationExecutor.ts:167:1)
在 ClassTransformer.plainToInstance (ClassTransformer.ts:77:1)
在 plainToClass (index.ts:71:1)
在 Object.resolver (class-validator.ts:41:1)
在 _executeSchema (createFormControl.ts:392:1)
在 createFormControl.ts:1112:1
在 HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

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