Next.js13+Prisma前端表单提交至后端API时数据异常原因排查

问题概述 #

在Next.js 13与Prisma开发环境中，表单提交出现数据异常：前端提交前打印数据完全正常，但后端接收后出现字段顺序变更、部分字段值为undefined、部分字段值显示为"String"的情况。尝试切换为Axios发送请求，问题依然存在。最终导致Prisma创建用户时，因firstName、lastName等必填字段为undefined抛出验证错误。

相关代码 #

前端Register.tsx（关键错误部分） #

'use client';

import { useState } from 'react';

export default function Register() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: ''
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    console.log('提交前的表单数据：', formData); // 此处打印数据正常
    try {
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      // 后续逻辑
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 错误：onChange绑定了handleSubmit，而非handleInputChange */}
      <input type="text" name="firstName" onChange={handleSubmit} placeholder="First Name" />
      <input type="text" name="lastName" onChange={handleSubmit} placeholder="Last Name" />
      <input type="email" name="email" onChange={handleInputChange} placeholder="Email" />
      <input type="password" name="password" onChange={handleInputChange} placeholder="Password" />
      <button type="submit">Register</button>
    </form>
  );
}

后端route.ts #

import { NextResponse } from 'next/server';
import prisma from '@/lib/prisma';
import bcrypt from 'bcrypt';

export async function POST(request: Request) {
  try {
    const body = await request.json();
    console.log('后端接收的数据：', body); // 日志显示firstName、lastName为undefined
    const { firstName, lastName, email, password } = body;

    const hashedPassword = await bcrypt.hash(password, 10);

    const user = await prisma.user.create({
      data: {
        firstName,
        lastName,
        email,
        password: hashedPassword
      }
    });

    return NextResponse.json(user);
  } catch (err) {
    console.error('创建用户失败：', err);
    return NextResponse.json({ error: 'Failed to create user' }, { status: 500 });
  }
}

错误日志 #

后端接收的数据： { firstName: undefined, lastName: undefined, email: "test@example.com", password: "test123" }
PrismaClientValidationError: 
Invalid `prisma.user.create()` invocation:

{
  data: {
    firstName: undefined,
    lastName: undefined,
    email: "test@example.com",
    password: "$2b$10..."
  }
}

Argument `firstName` is missing.

问题根因与修复方案 #

根因 #

前端输入框的onChange事件错误绑定为handleSubmit提交函数，而非负责更新表单状态的handleInputChange函数。导致firstName、lastName字段的用户输入从未同步到formData状态中，提交时后端接收到的是初始空值（或未定义），进而引发Prisma的必填字段验证错误。

修复方案 #

将所有输入框的onChange属性修改为绑定handleInputChange函数，确保用户输入能实时更新表单状态：

// 修改后
<input type="text" name="firstName" onChange={handleInputChange} placeholder="First Name" />
<input type="text" name="lastName" onChange={handleInputChange} placeholder="Last Name" />

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