React Native中通过x-www-form-urlencoded发送对象数组问题

你的问题核心在于直接把对象赋值给data["array[]"]后，encodeURIComponent会默认把对象转成[object Object]字符串，后端自然没法解析成有效数据。下面给你两种实用的解决方案：

方案一：将对象序列化为JSON字符串后发送 #

这种方式简单直接，适合对象结构复杂的场景，后端拿到数据后只需反序列化即可：

// 遍历数组，把每个对象转为JSON字符串
global.modifiedOffline.forEach((elem) => {
  data["array[]"] = JSON.stringify(elem);
});

// 生成formBody的逻辑保持不变
const formBody = Object.keys(data).map(key => 
  encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
).join('&');

// 发送请求时务必设置正确的请求头
fetch('你的接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: formBody,
})
.then(res => res.json())
.catch(err => console.error('请求出错:', err));

后端接收后，只需要把array[]数组中的每个JSON字符串解析成对象就能正常使用。

方案二：按form表单嵌套格式展开对象属性 #

如果你的后端框架支持自动解析嵌套form数据（比如Spring Boot、Express的相关中间件），可以把每个对象的属性拆分成array[索引].属性名的格式，让后端直接绑定到对象数组：

let index = 0;
global.modifiedOffline.forEach((elem) => {
  // 遍历对象的每个键值对，生成嵌套的form字段键
  Object.keys(elem).forEach(key => {
    data[`array[${index}].${key}`] = elem[key];
  });
  index++;
});

// 生成formBody并发送请求
const formBody = Object.keys(data).map(key => 
  encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
).join('&');

fetch('你的接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: formBody,
})
.then(res => res.json())
.catch(err => console.error('请求出错:', err));

这种方式完全符合form表单的标准提交格式，后端不需要额外处理JSON解析，就能直接拿到可用的对象数组。

你可以根据后端的处理能力选择合适的方案，方案二更贴合传统form提交逻辑，方案一则适合快速处理结构复杂的对象。

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