使用MUI DatePicker选择日期时出现Cannot read properties of undefined (reading 'name')错误

问题原因 #

你直接将React Hook Form的register返回值展开到DatePicker组件上，这会导致回调冲突：

• React Hook Form的register生成的onChange方法期望接收包含target.name的标准Input事件对象
• 但MUI DatePicker的onChange回调参数直接是选中的日期值，不是事件对象

当你点击日历图标选择日期时，DatePicker触发的onChange传递的是日期值，此时register的onChange试图读取event.target.name，但event是日期值而非事件对象，自然会抛出Cannot read properties of undefined (reading 'name')的错误。

解决方案 #

方案一：使用React Hook Form的Controller组件（推荐） #

Controller是React Hook Form专门为非原生表单控件设计的包装组件，能完美适配MUI DatePicker这类自定义控件：

import { Controller, useForm } from 'react-hook-form';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

function YourFormComponent() {
  const { control, formState: { errors } } = useForm({
    defaultValues: {
      startDate: null // 初始化默认值
    }
  });

  return (
    <Controller
      name="startDate"
      control={control}
      rules={{ required: 'This field is required.' }}
      render={({ field }) => (
        <DatePicker
          label="Start Date"
          inputFormat="dd/MM/yyyy"
          value={field.value}
          onChange={(newDate) => field.onChange(newDate)}
          renderInput={(params) => (
            <TextField
              {...params}
              fullWidth
              variant="outlined"
              error={!!errors.startDate}
              helperText={errors.startDate?.message}
            />
          )}
        />
      )}
    />
  );
}

方案二：手动拆分register和DatePicker的回调 #

将register的属性绑定到内部的TextField上，同时单独处理DatePicker的onChange事件：

import { useForm } from 'react-hook-form';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

function YourFormComponent() {
  const { register, setValue, watch, formState: { errors } } = useForm({
    defaultValues: {
      startDate: null
    }
  });
  // 实时监听字段值
  const startDate = watch('startDate');

  return (
    <DatePicker
      label="Start Date"
      inputFormat="dd/MM/yyyy"
      value={startDate}
      // 手动更新表单字段值
      onChange={(newDate) => setValue('startDate', newDate)}
      renderInput={(params) => (
        <TextField
          {...params}
          fullWidth
          variant="outlined"
          // 将register绑定到TextField上处理校验和输入事件
          {...register('startDate', {
            required: 'This field is required.'
          })}
          error={!!errors.startDate}
          helperText={errors.startDate?.message}
        />
      )}
    />
  );
}

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