Next.js项目：如何将FormData自动转换为对象数组？

一、有没有类似PHP/Rails的自动转换方式？ #

React/Next.js生态里没有像PHP、Ruby on Rails那样原生支持FormData自动映射为嵌套数组对象的机制——后端框架的自动解析是其内置的服务端处理能力，前端FormData本身是扁平键值结构，需要手动处理或借助工具完成结构化转换。

二、可用的工具包推荐 #

• form-data-to-json：轻量工具，支持解析带数组索引的FormData键名（如completeSuccessIndicators[0][si]），直接输出目标结构。
  使用示例：

  import formDataToJson from 'form-data-to-json';
  
  async function handleFormAction(formData) {
    const structuredData = formDataToJson(formData);
    // structuredData.completeSuccessIndicators即为你需要的数组
  }
  

• react-hook-form：若使用表单库，它可在提交时直接生成结构化数据，无需手动处理FormData。只需配置字段名采用数组语法：

  import { useForm } from 'react-hook-form';
  
  function TargetForm() {
    const { register, handleSubmit } = useForm();
    const onSubmit = (data) => {
      // data中直接包含符合要求的completeSuccessIndicators数组
      console.log(data);
    };
  
    return (
      <form action={handleSubmit(onSubmit)}>
        {[1,2].map((si) => (
          <div key={si}>
            <input {...register(`completeSuccessIndicators[${si-1}].si`)} defaultValue={si} />
            <input {...register(`completeSuccessIndicators[${si-1}].actual_accomplishment`)} />
            {/* 其他字段如ql_qn、timeliness等同理配置 */}
          </div>
        ))}
        <button type="submit">提交</button>
      </form>
    );
  }
  

• qs：老牌查询字符串解析库，可间接处理FormData。先将FormData转为URLSearchParams，再用qs.parse解析：

  import qs from 'qs';
  
  async function handleFormAction(formData) {
    const paramStr = new URLSearchParams(formData).toString();
    const structuredData = qs.parse(paramStr, { arrayFormat: 'indices' });
  }
  

三、自行编写解析逻辑的思路 #

如果不想依赖工具包，可按以下步骤手动解析：

1. 要求表单字段名遵循completeSuccessIndicators[索引].字段名的格式（如completeSuccessIndicators[0].si）；
2. 遍历FormData的键值对，通过正则匹配拆分出数组索引和字段名；
3. 初始化目标数组，根据索引将字段值对应到数组内的对象中；
4. 对数值类型的字段（如si、ql_qn）做类型转换。

示例代码：

function parseFormDataToTarget(formData) {
  const result = { completeSuccessIndicators: [] };
  for (const [key, value] of formData.entries()) {
    const keyMatch = key.match(/^completeSuccessIndicators\[(\d+)\]\.(\w+)$/);
    if (keyMatch) {
      const index = parseInt(keyMatch[1], 10);
      const field = keyMatch[2];
      // 初始化数组中对应索引的对象
      if (!result.completeSuccessIndicators[index]) {
        result.completeSuccessIndicators[index] = {};
      }
      // 区分字符串和数值类型
      result.completeSuccessIndicators[index][field] = isNaN(Number(value)) ? value : Number(value);
    }
  }
  return result;
}

// 使用示例
async function handleFormAction(formData) {
  const finalData = parseFormDataToTarget(formData);
  console.log(finalData.completeSuccessIndicators);
}

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