React Hook 表单解析器 Moment答案

【问题标题】：React Hook Form resolver MomentReact Hook 表单解析器 Moment
【发布时间】：2022-01-15 02:47:18
【问题描述】：

我正在使用 React Hook Form V7 并利用 @hookform/yupResolver 创建一个表单。我收到此错误：

Type '<TFieldValues extends FieldValues, TContext>(values: UnpackNestedValue<TFieldValues>, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<...>' is not assignable to type 'Resolver<ReporterInformationModel, object>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<ReporterInformationModel>' is not assignable to type 'ResolverOptions<{ city?: Nullable<string> | undefined; dateOfBirth?: { format: {}; startOf: {}; endOf: {}; add: {}; subtract: {}; calendar: {}; clone: {}; valueOf: {}; local: {}; isLocal
: {}; utc: {}; isUTC: {}; ... 76 more ...; propertyIsEnumerable: {}; } | null | undefined; ... 11 more ...; zip?: Nullable<...> | u...'.
      Type '{ format: {}; startOf: {}; endOf: {}; add: {}; subtract: {}; calendar: {}; clone: {}; valueOf: {}; local: {}; isLocal: {}; utc: {}; isUTC: {}; isUtc: {}; parseZone: {}; isValid: {}; invalidAt: {}; hasAlignedHourOffset: {}; ... 71 more ...; propertyIsEnum
erable: {}; } | null | undefined' is not assignable to type 'Datable | undefined'.
        Type '{ format: {}; startOf: {}; endOf: {}; add: {}; subtract: {}; calendar: {}; clone: {}; valueOf: {}; local: {}; isLocal: {}; utc: {}; isUTC: {}; isUtc: {}; parseZone: {}; isValid: {}; invalidAt: {}; hasAlignedHourOffset: {}; ... 71 more ...; propertyIsEn
umerable: {}; }' is not assignable to type 'Moment'.
          Types of property 'format' are incompatible.
            Type '{}' is not assignable to type '(format?: string | undefined) => string'.
              Type '{}' provides no match for the signature '(format?: string | undefined): string'.  TS2322

    56 |     const schema = reporterInformationSchema(t);
    57 |     const { control, formState: { errors }, handleSubmit, setValue, trigger } = useForm<ReporterInformationModel>({
  > 58 |         resolver: yupResolver(schema),
       |         ^
    59 |         defaultValues: {
    60 |             ...reporterInformation,
    61 |         },

这是useForm代码：

const { control, formState: { errors }, handleSubmit, setValue, trigger } = useForm<InfoModel>({
        resolver: yupResolver(schema),
        defaultValues: {
            ...reporterInformation,
        },
    });

InfoModel 在哪里：

    dateOfBirth?: moment.Moment | null;
    firstName: string | null;
    lastName: string | null;

我已将问题缩小到错误是由于 dateOfBirth 字段引起的，即时刻。

【问题讨论】：

标签： reactjs typescript react-hook-form yup

【解决方案1】：

这是一个设计限制。我们不建议在您的表单中放置复杂的对象，例如时刻。这是一个类似的问题：https://github.com/react-hook-form/resolvers/issues/258

【讨论】：

意识到了这一点。为了达到预期的结果，我必须使用 Omit 扩展我的界面，并将 dateOfBirth 字段更改为 Date，并在存储数据时将其更改回 Moment。