在React-Hook-Form中使用MUI DatePicker组件报错，求解决

你的代码核心问题是没有给DatePicker传递绑定表单状态的value属性，导致组件无法和React Hook Form的表单状态同步，触发错误。以下是修正方案：

1. 补充必要导入（确保依赖已安装） #

先确认已安装@mui/x-date-pickers、dayjs、react-hook-form，然后在组件中导入缺失的模块：

import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";

2. 修正Controller与DatePicker的绑定 #

需要将Controller提供的field.value传递给DatePicker的value属性，同时优化onChange逻辑以处理清空选择的情况：

import { Controller, useForm } from "react-hook-form";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";

export const Demo = () => {
  const { control } = useForm({
    defaultValues: {
      dateOfBirth: null,
    }
  });

  return (
    <form>
      <Controller
        name="dateOfBirth"
        control={control}
        render={({ field: { value, onChange } }) => (
          <DatePicker
            label="Date of Birth"
            format="YYYY-MM-DD"
            // 绑定表单值，确保组件状态与表单同步
            value={value}
            // 处理日期选择，同时兼容清空操作
            onChange={(newValue) => {
              onChange(newValue ? newValue.format("YYYY-MM-DD") : null);
            }}
          />
        )}
      />
    </form>
  )
}

3. 根组件的导入确认 #

确保根组件的依赖导入正确：

import ReactDOM from "react-dom/client";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { Demo } from "./Demo";

ReactDOM.createRoot(document.getElementById('root')).render(
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Demo />
    </LocalizationProvider>
)

关键说明 #

• DatePicker必须接收value属性才能正确同步表单状态，缺失该属性会导致组件状态混乱，触发报错。
• onChange中增加对newValue的空值判断，避免用户清空日期时调用format方法报错。

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