NextJS读取FormData时判定数据为null的问题求助
问题排查与修复方案
1. ticket_status 变量处理逻辑错误
- 初始赋值
var tistat = form;中form未定义,属于笔误,直接导致tistat初始值异常。 - 表单提交的
ticket_status(通常为复选框)通过FormData.get()获取到的是字符串类型(比如选中时返回"on"),而非布尔值或数字,原判断条件formData.get("ticket_status") === true、===2永远不会触发,最终tistat始终处于未定义状态,触发Zod校验时被判定为null。 - 修复方式:
// 直接通过返回值判断复选框是否选中 const tistat = formData.get("ticket_status") === "on";
2. Zod 校验未适配表单数据类型
- 原
FormSchema中date_rsvp使用z.date(),但表单提交的日期是字符串格式,直接通过new Date()转换可能生成无效日期(比如用户输入格式不兼容),导致Zod校验失败,返回null。 - 修复方式:使用Zod的
coerce.date()自动将字符串转换为有效日期,同时补充邮箱格式校验增强严谨性:const FormSchema = z.object({ id: z.string(), name: z.string(), email: z.string().email(), phone: z.string(), date_rsvp: z.coerce.date(), // 自动处理字符串到日期的转换 ticket_status: z.boolean(), });
3. 变量作用域错误
- 原代码在
if/else块内用const tistat重新声明变量,属于块级作用域,外层的tistat不会被更新,始终保持初始错误值。直接去掉块内的const声明,或使用表达式直接赋值即可解决。
4. 冗余代码与字段名一致性检查
- 代码中
const date = new Date().toISOString().split('T')[0];未被使用,可直接删除。 - 确认表单中所有字段的
name属性和formData.get()中的键完全一致(比如表单里的name="date_rsvp",而非其他拼写),避免因字段名不匹配导致获取到null。
修复后的完整代码
'use server'; import { z } from 'zod'; import { sql } from '@vercel/postgres'; import { redirect } from 'next/navigation' const FormSchema = z.object({ id: z.string(), name: z.string(), email: z.string().email(), phone: z.string(), date_rsvp: z.coerce.date(), ticket_status: z.boolean(), }); const AddAttendee = FormSchema.omit({ id: true }); export async function addAttendee(formData: FormData) { const tistat = formData.get("ticket_status") === "on"; const { name, email, phone, date_rsvp, ticket_status } = AddAttendee.parse({ name: formData.get("name"), email: formData.get("email"), phone: formData.get("phone"), date_rsvp: formData.get("date_rsvp"), ticket_status: tistat, }); await sql` INSERT INTO "Attendee" (name, phone, email, ticket_status, date_rsvp) VALUES (${name}, ${phone}, ${email}, ${ticket_status}, ${date_rsvp}) `; redirect("/dashboard/attendees") }
内容的提问来源于stack exchange,提问作者kool
相关产品推荐
相关产品推荐

