如何将表单对象数据转换为API要求的嵌套JSON格式以发起POST请求

你不需要修改现有的表单状态结构，只需要在提交请求前，把data.formData映射成API要求的格式即可。核心是拆分字段到对应的嵌套结构，并处理数值类型转换：

转换逻辑与代码示例 #

// 定义转换函数
const transformFormDataToApiFormat = (formData) => {
  return {
    Applicants: [
      {
        Email: formData.Email,
        Forename: formData.Forename,
        Surname: formData.Surname,
        Mobile: formData.Mobile
      }
    ],
    Vehicles: [
      {
        Make: formData.Make
      }
    ],
    FinanceDetails: {
      FinanceTypeId: formData.FinanceTypeId
    },
    // 表单输入为字符串，API要求数值类型，需做类型转换
    AmountToBorrow: parseInt(formData.AmountToBorrow, 10),
    Term: parseInt(formData.Term, 10)
  };
};

// 提交请求时调用转换函数
const handleSubmit = async () => {
  try {
    const apiPayload = transformFormDataToApiFormat(data.formData);
    const response = await fetch('第三方API接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(apiPayload)
    });
    // 后续响应处理逻辑
  } catch (error) {
    // 错误处理逻辑
  }
};

关键注意点 #

• 数值类型转换：表单输入默认是字符串，API要求AmountToBorrow和Term为数字，可根据实际情况用parseInt/Number()转换，若需处理空输入，可添加判断逻辑（如formData.AmountToBorrow ? parseInt(...) : 0）。
• 扩展场景：如果后续需要支持多申请人/多车辆，只需扩展对应数组的元素即可，当前示例适配单个申请人和车辆的情况。

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