使用React-Hook-Form时MUI DatePicker处理ISO 8601日期遇类型错误求助

错误原因 #

你使用AdapterDayjs作为MUI DatePicker的日期适配器，这意味着DatePicker要求传入的值必须是dayjs实例。但你直接将服务器返回的ISO 8601格式字符串（比如"2023-11-10T05:00:00.000Z"）传给了组件，当DatePicker内部调用dayjs的isBefore方法时，字符串类型没有该方法，因此抛出TypeError: value.isBefore is not a function。

解决方法 #

核心是把服务器返回的ISO字符串转换成dayjs对象，再传递给DatePicker，以下是两种常见实现方式：

方式1：在表单初始化时转换 #

如果是从服务器获取数据后初始化表单，直接在useForm的defaultValues里完成转换：

import { useForm } from "react-hook-form";
import dayjs from "dayjs";

// 假设从服务器拿到的数据
const serverData = { birthDate: "2023-11-10T05:00:00.000Z" };

const { control } = useForm({
  defaultValues: {
    birthDate: dayjs(serverData.birthDate) // 转换为dayjs实例
  }
});

// 正常使用DateInput组件
<DateInput control={control} name="birthDate" label="出生日期" />

方式2：在DateInput组件内部处理初始值 #

如果要让组件更通用，可以给DateInput新增initialValue属性，在组件内部完成转换：

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

interface Props {
  control: Control;
  name: string;
  label: string;
  initialValue?: string; // 新增初始值属性
}

const DateInput: React.FC<Props> = ({ control, name, label, initialValue }) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Controller
        name={name}
        control={control}
        defaultValue={initialValue ? dayjs(initialValue) : dayjs(new Date())}
        render={({ field: { ref, ...rest } }) => (
          <DatePicker label={label} format="MM-DD-YYYY" {...rest} />
        )}
      />
    </LocalizationProvider>
  );
};

export default DateInput;

使用时直接传入服务器返回的ISO字符串：

<DateInput 
  control={control} 
  name="birthDate" 
  label="出生日期" 
  initialValue="2023-11-10T05:00:00.000Z" 
/>

额外提示 #

如果表单提交时需要将dayjs对象转回ISO字符串，可在提交逻辑中用dayjsValue.toISOString()完成转换。

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