React(TypeScript)中如何在POST请求中获取表单数据？

一、完善注册页面提交逻辑 #

我们可以利用Next.js的Server Actions安全处理POST提交，无需手动发送请求，代码如下：

import React from 'react';
import { redirect } from 'next/navigation';

export default function SignUpPage() {
  // 定义Server Action，必须添加'use server'指令标识为服务器端函数
  async function submitCredentials(formData: FormData) {
    'use server';
    
    // 从表单数据中提取姓名
    const firstName = formData.get('firstName') as string;
    const lastName = formData.get('lastName') as string;

    // 基础校验：确保姓名不为空
    if (!firstName.trim() || !lastName.trim()) {
      throw new Error('请完整填写名和姓');
    }

    // 将临时数据存入HttpOnly Cookie（有效期1分钟，仅用于页面跳转传递）
    const { cookies } = await import('next/headers');
    const cookieStore = cookies();
    cookieStore.set('tempUserInfo', JSON.stringify({ firstName, lastName }), {
      maxAge: 60,
      path: '/',
      httpOnly: true, // 仅服务器端可读取，提升安全性
    });

    // 重定向至完成页面
    redirect('/complete');
  }

  return (
    <>
      {/* 通过action属性绑定Server Action，无需手动设置method/post */}
      <form autoComplete="off" action={submitCredentials}>
        <label htmlFor="firstNameInputField">First Name: </label>
        <input 
          type="text" 
          id="firstNameInputField" 
          name="firstName" 
          required // HTML原生必填校验
        />
        <br />
        <label htmlFor="lastNameInputField">Last Name: </label>
        <input 
          type="text" 
          id="lastNameInputField" 
          name="lastName" 
          required 
        />
        <br />
      
        <input type="submit" value="Submit" />
      </form>
    </>
  );
}

关键改动说明： #

• 移除useRef，改用FormData自动收集表单数据，代码更简洁规范
• 使用Server Actions处理提交逻辑，运行在服务器端，避免客户端暴露敏感流程
• 通过HttpOnly Cookie临时存储数据，相比URL参数更安全，不会暴露在地址栏
• 新增HTML原生+服务器端双重必填校验

二、完善完成页面数据获取逻辑 #

在完成页面中，从服务器端读取临时Cookie数据，展示后立即删除避免残留：

import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';

export default function SignUpComplete() {
  // 服务器端读取Cookie
  const cookieStore = cookies();
  const tempUserInfo = cookieStore.get('tempUserInfo');

  // 若直接访问该页面（无有效数据），重定向回注册页
  if (!tempUserInfo) {
    redirect('/');
  }

  // 解析Cookie中的用户数据
  const { firstName, lastName } = JSON.parse(tempUserInfo.value);

  // 读取后立即删除临时Cookie，避免数据泄露
  cookieStore.delete('tempUserInfo');

  return (
    <>
      <p>Thank you for submitting! Your credentials are:</p>
      <p>First name: {firstName}</p>
      <p>Last name: {lastName}</p>
      <br />
      <a href="/login">Click here to login!</a>
    </>
  );
}

关键改动说明： #

• 利用Next.js的cookies() API在服务器端读取临时数据
• 添加路由保护：无有效数据时自动重定向回注册页面
• 读取数据后立即删除Cookie，避免用户刷新或再次访问时仍能看到数据

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