React Formik组件POST请求适配：如何将地址数据包裹为API要求的permanent_address格式

你找的方向没错——把请求体包裹进permanent_address对象里就行，只是需要把相关的代码都同步调整到位。这里需要修改三个关键部分：

1. 重构请求体构造逻辑 #

在AddPersentAddressForm组件的handleSubmit函数里，把原来的扁平字段全部包装到permanent_address对象中，替换掉原来的reqbody构造代码：

const reqbody: IReqBody = {
  permanent_address: {
    division: division,
    district: district,
    thana: thana,
    house: house,
    // 如果后续要启用same_address字段，也需要放在这个对象内（根据API要求调整）
  }
};

2. 更新TypeScript类型定义 #

因为你用了TypeScript，必须同步更新IReqBody的类型结构，确保类型和API要求的格式一致：

// 先定义地址详情的子类型
type AddressDetails = {
  division: string;
  district: string;
  thana: string;
  house: string;
  // same_address?: boolean; // 后续启用时可添加
};

// 再定义完整的请求体类型
type IReqBody = {
  permanent_address: AddressDetails;
};

3. 可选：优化请求函数的参数类型 #

为了让代码类型更严谨，把addPersonalInfo的参数从any改成我们刚定义的IReqBody：

export async function addPersonalInfo(reqbody: IReqBody) {
  // 原有请求逻辑保持不变
}

这样修改后，你的请求payload就会完全匹配API要求的格式：

{
  "permanent_address": {
    "house": "Manama Tower",
    "division": "Dhaka",
    "district": "DHAKA-NORTH",
    "thana": "Dhanmondi"
  }
}

另外注意API示例里的字段值是小写（比如"dhaka"），如果API严格要求小写格式，你可以在构造请求体时把对应字段转成小写：

permanent_address: {
  division: division.toLowerCase(),
  district: district.toLowerCase(),
  thana: thana.toLowerCase(),
  house: house,
}

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