NextJS长表单如何高效将FormData转换为RawFormData？

方案1：直接遍历FormData转换为对象 #

利用FormData的可迭代特性，用Object.fromEntries快速转换为普通对象，无需手动逐个字段取值。如果表单包含数组类型字段（如复选框），可以额外处理：

const handleCreate = async (formData: FormData) => {
  "use server";
  
  // 基础转换：适合单值输入字段
  const rawFormData = Object.fromEntries(formData);

  // 处理数组类型字段（如name="hobbies[]"的复选框）
  const rawFormDataWithArrays: Record<string, string | string[]> = {};
  for (const [key, value] of formData.entries()) {
    if (rawFormDataWithArrays[key]) {
      rawFormDataWithArrays[key] = Array.isArray(rawFormDataWithArrays[key]) 
        ? [...rawFormDataWithArrays[key] as string[], value] 
        : [rawFormDataWithArrays[key] as string, value];
    } else {
      rawFormDataWithArrays[key] = value;
    }
  }

  // 后续业务逻辑
};

适用场景：需要提取表单所有字段，无需过滤的情况。

方案2：将字段列表嵌入表单隐藏域 #

把需要提取的字段数组以JSON字符串形式存入表单的隐藏输入框，Server Action中从FormData读取并解析，再批量提取字段：

前端表单添加隐藏域 #

<input 
  type="hidden" 
  name="formFields" 
  value='["id","name","address","gender","dob"]' 
/>

Server Action处理代码 #

const handleCreate = async (formData: FormData) => {
  "use server";
  
  // 解析隐藏域中的字段列表
  const fields = JSON.parse(formData.get("formFields") as string) as string[];
  const rawFormData: Record<string, string | null> = {};

  // 批量提取字段值
  fields.forEach(field => {
    rawFormData[field] = formData.get(field);
  });

  // 后续业务逻辑
};

适用场景：只需要提取表单中指定字段，避免冗余数据的情况。

方案3：结合类型定义实现类型安全提取 #

如果需要严格的类型约束，可以先定义表单字段的类型，再通过工具函数或类型断言简化提取过程：

// 定义表单字段的类型
type FormDataModel = {
  id: string;
  name: string;
  address: string;
  gender: string;
  dob: string;
  // 其他字段...
};

const handleCreate = async (formData: FormData) => {
  "use server";
  
  // 方式1：类型断言快速转换
  const rawFormData = Object.fromEntries(formData) as FormDataModel;

  // 方式2：用工具函数统一处理，兼顾类型提示和减少重复代码
  const getField = <K extends keyof FormDataModel>(key: K) => 
    formData.get(key) as FormDataModel[K];
  
  const rawFormData = {
    id: getField("id"),
    name: getField("name"),
    address: getField("address"),
    // 虽然仍需逐个写字段，但有完整类型提示，避免拼写错误
  };

  // 后续业务逻辑
};

适用场景：对类型安全要求高，需要在编译阶段校验字段的情况。

内容的提问来源于stack exchange，提问作者pear-holder