React Native如何创建内嵌JSON array的JSON object用于API提交

核心逻辑基础 #

RN的运行环境（Hermes、JSC）原生支持JS对象、数组的嵌套定义，不需要引入第三方JSON处理依赖，按照接口约定的层级结构编写对应JS代码，生成的对象就是符合序列化要求的JSON结构。

分步实现操作 #

1. 对齐接口的结构定义 #

先根据后端接口文档，拆分出外层对象的平铺字段、内部嵌套数组的元素结构，举个订单提交场景的通用目标结构参考：

// 接口要求的完整请求结构示例
{
  // 外层对象的平铺字段
  userId: "字符串格式的用户ID",
  submitSource: "RN端",
  // 内部嵌套的JSON array，每个元素的结构需要和接口要求完全对齐
  itemList: [
    {
      skuId: "商品SKU唯一标识",
      count: "数字格式的购买数量",
      spec: "用户选择的商品规格"
    }
  ]
}

2. 动态拼接嵌套结构 #

实际业务中，嵌套数组的内容一般来自页面状态（useState、Redux等存储的列表数据），不会硬编码在代码里，通用的拼接写法如下：

// 从页面状态中读取零散业务数据
const userInfo = useSelector(state => state.user);
const selectedGoodsList = useSelector(state => state.cart.selectedGoods);

// 构造完整的带嵌套数组的请求对象
const requestBody = {
  userId: userInfo.id,
  submitSource: "ReactNative",
  // 通过数组map方法，把页面上的商品列表映射成接口要求的数组结构
  itemList: selectedGoodsList.map(goods => ({
    skuId: goods.skuId,
    count: goods.buyCount,
    spec: goods.selectedSpec
  }))
};

如果需要逐元素动态填充数组，也可以通过数组push的方式实现：

const requestBody = {
  userId: "test_user_001",
  itemList: [] // 先初始化空的嵌套数组
};

// 遍历业务数据，逐元素填充数组
selectedGoodsList.forEach(goods => {
  requestBody.itemList.push({
    skuId: goods.skuId,
    count: goods.buyCount,
    spec: goods.selectedSpec
  });
});

3. 提交API前的格式校验 #

• 使用fetch、axios等通用请求库发请求时，只要把请求头Content-Type设置为application/json，直接把构造好的requestBody传入请求参数即可，请求库会自动完成序列化，不需要手动调用JSON.stringify，避免出现双重转义导致后端解析失败的问题；
• 如果接口明确要求接收字符串格式的JSON内容，再手动调用JSON.stringify(requestBody)处理；
• 构造完成后在控制台打印requestBody，确认嵌套数组的字段名、字段类型和接口文档完全匹配，比如不要把数字类型的购买数量传成字符串、不要遗漏必填的数组字段。

常见踩坑提醒 #

• 不要把RN特有的不可序列化内容（比如组件实例、事件回调、原生模块引用）塞到请求对象里，这类内容在序列化时会被丢失，甚至触发运行时报错；
• 对嵌套的数组字段做兜底处理，比如用户没有选中任何商品时，要保证itemList是空数组[]，不要让该字段变成undefined，避免后端因为参数缺失报错。

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