You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.24 23:43:14