React中无法获取DesktopDatePicker值，表单提交时dob为undefined

核心问题 #

你代码里没有正确使用React Hook Form的Controller提供的field对象，导致DatePicker的选择值没有同步到表单状态里。

修正步骤 #

• 直接复用field对象里的value和onChange，替换你当前自定义的value和setValue逻辑。Controller的field已经封装了和表单状态绑定的逻辑，不需要手动调用setValue。
• 推荐把LocalizationProvider移到Controller外部，避免每次渲染重复初始化，提升组件性能。

修正后的完整代码 #

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Controller
    control={control}
    name="dob"
    render={({ field }) => (
      <DesktopDatePicker<Dayjs.Dayjs>
        label="For desktop"
        value={field.value}
        onChange={field.onChange}
        onError={(err) => {
          console.group('onError');
          console.log(err);
          console.groupEnd();
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    )}
  />
</LocalizationProvider>

额外说明 #

如果需要把Dayjs对象转换成字符串（比如ISO格式）存入表单，可以给Controller添加transform属性处理：

<Controller
  control={control}
  name="dob"
  transform={(value) => value?.toISOString()} // 转换为ISO字符串
  render={({ field }) => (
    // ... 其他代码不变
  )}
/>

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