Next.js表单中日期字段加载异常问题求助

核心思路 #

不要忽略类型错误，而是通过分离表单字段类型与数据库模型类型、在提交阶段统一转换日期格式的方式彻底解决问题。具体步骤如下：

1. 定义表单专用类型 #

表单输入的日期是字符串格式（dd/mm/yyyy），而数据库模型中的日期是Date类型，因此需要创建一个表单专属类型，避免类型冲突：

// 基于Prisma的StudyRecord类型，替换日期字段为string类型
type StudyRecordForm = Omit<Prisma.StudyRecord, 'studyDate' | 'nextReview'> & {
  studyDate: string;
  nextReview: string;
};

在初始化React Hook Form时指定该类型：

const { register, reset, handleSubmit } = useForm<StudyRecordForm>();

2. 修正reset逻辑（消除类型错误） #

现在reset传入的参数与表单类型完全匹配，不会再出现类型报错：

useEffect(() => {
  if (!record) return;
  
  reset({
    studyDate: getDateWithoutUTC(record.studyDate),
    studyType: record.studyType,
    duration: record.duration,
    correctQuestions: record.correctQuestions,
    totalQuestions: record.totalQuestions,
    nextReview: getDateWithoutUTC(record.nextReview),
    observations: record.observations,
  });
}, [record, reset]);

确保getDateWithoutUTC的转换逻辑正确：

const getDateWithoutUTC = (date: Date): string => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
};

3. Zod验证日期格式 #

用Zod验证输入的字符串是否符合巴西日期格式，并确保日期有效：

import { z } from 'zod';

const studyRecordSchema = z.object({
  studyDate: z.string()
    .refine(date => /^\d{2}\/\d{2}\/\d{4}$/.test(date), '请输入有效的日期格式（dd/mm/yyyy）')
    .refine(date => {
      const [day, month, year] = date.split('/').map(Number);
      const parsedDate = new Date(year, month - 1, day);
      return parsedDate instanceof Date && !isNaN(parsedDate);
    }, '日期无效'),
  nextReview: z.string()
    .refine(date => /^\d{2}\/\d{2}\/\d{4}$/.test(date), '请输入有效的日期格式（dd/mm/yyyy）')
    .refine(date => {
      const [day, month, year] = date.split('/').map(Number);
      const parsedDate = new Date(year, month - 1, day);
      return parsedDate instanceof Date && !isNaN(parsedDate);
    }, '日期无效'),
  // 其他字段验证...
});

4. 提交时转换为Date类型 #

在表单提交阶段，将字符串日期转换为Date类型，再传给Prisma：

const onSubmit = async (data: StudyRecordForm) => {
  // 字符串转Date的工具函数
  const convertToDate = (dateStr: string): Date => {
    const [day, month, year] = dateStr.split('/').map(Number);
    return new Date(year, month - 1, day);
  };

  await prisma.studyRecord.update({
    where: { id: record.id },
    data: {
      ...data,
      studyDate: convertToDate(data.studyDate),
      nextReview: convertToDate(data.nextReview),
    },
  });

  // 提交后的逻辑（如刷新数据、跳转页面）
};

为什么这是最优解？ #

• 彻底消除类型错误，避免潜在的运行时bug
• 明确区分表单层（字符串格式）与数据库层（Date类型）的职责
• 保证表单显示、验证、提交全流程的一致性

内容的提问来源于stack exchange，提问作者João Neto