MUI Datepicker与react-hook-form集成报错及提交问题求助

我在尝试将MUI的DatePicker组件与react-hook-form集成时遇到问题：选择日期会触发错误，同时DOB字段无法正确提交到后端。

初始代码（可运行/不可运行部分已注释） #

<Controller
  control={control}
  name="DOB"
  render={({ field }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        // defaultValue={dayjs(defaultvalues.DOB)}
        value={dobvalue}
        onChange={(value) => {
          // field.onChange(value);
          setDobvalue(value);
        }}
        id="DOB"
        format="YYYY-MM-DD"
        label={t("Date of Bearth")}
        // {...register("DOB", {})}
      />
    </LocalizationProvider>
  )}
/>

触发的错误 #

caught (in promise) TypeError: Cannot read properties of undefined (reading 'name')

编辑后的代码（问题仍存在） #

<Controller
  control={control}
  name="DOB"
  defaultValue={dayjs(defaultvalues.DOB) || ""}
  render={({ field }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        value={field.value}
        onChange={(value) => {
          field.onChange(value);
        }}
        id="DOB"
        format="YYYY-MM-DD"
        label={t("Date of Bearth")}
        {...register("DOB", {})}
      />
    </LocalizationProvider>
  )}
/>

问题分析与解决方案 #

核心错误点

1. Controller与register冲突：react-hook-form的Controller是专门封装受控组件的工具，内部field对象已包含value、onChange等控制属性。同时使用{...register("DOB", {})}会导致重复绑定，触发name属性未定义的错误。
2. defaultValue处理不当：如果defaultvalues.DOB为空，dayjs("")会生成无效日期对象，应传入null作为空初始值。
3. 拼写错误：Date of Bearth应为Date of Birth，虽不影响功能，但会降低用户体验。

修正后的代码

<Controller
  control={control}
  name="DOB"
  defaultValue={defaultvalues.DOB ? dayjs(defaultvalues.DOB) : null}
  render={({ field }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        {...field}
        format="YYYY-MM-DD"
        label={t("Date of Birth")}
        onChange={(value) => field.onChange(value)}
      />
    </LocalizationProvider>
  )}
/>

说明

• {...field}自动传递value、onChange、name等必要属性，无需手动重复设置。
• defaultValue确保初始值要么是有效的dayjs对象，要么是null，避免无效日期导致的异常。
• 调用field.onChange(value)时，react-hook-form会自动更新表单状态，确保DOB字段能正确提交到后端。

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