React Native中提交映射数组数据至API端点失败，求解决

核心问题在于你提交的数据格式不匹配后端接口的预期：

• 成功的请求发送的是单个JSON对象，后端接口能正常解析；
• 映射后的请求发送的是JSON对象数组，后端接口未设计支持数组类型的请求体，因此返回错误。

具体排查步骤 #

1. 查看失败请求的响应详情：打开浏览器F12的Network面板，找到对应的POST请求，查看Response标签里的具体错误信息（比如400状态码的提示），这能直接明确后端拒绝数组的原因。
2. 确认后端接口文档：检查/add-to-cart是否支持批量添加商品。如果支持，文档会说明预期的请求体格式（比如需要把数组包裹在特定字段下）。

解决方案 #

方案1：后端支持批量添加（按接口要求包装数组） #

如果后端允许批量提交，通常需要将数组放在指定的键下，比如：

// 假设后端预期接收 { cartItems: [...] } 格式
const requestData = { cartItems: data };

fetch('https://app.example.pro/add-to-cart', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestData),
})
.then((response) => response.json())
.then((responseData) => {
  console.log('批量添加成功:', responseData);
})
.catch((error) => {
  console.error('批量添加失败:', error);
});

方案2：后端仅支持单个添加（循环提交每个对象） #

如果后端只能处理单个商品数据，遍历数组逐个发送请求：

// 用Promise.all等待所有请求完成
Promise.all(
  data.map(item => 
    fetch('https://app.example.pro/add-to-cart', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(item),
    })
    .then(res => {
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.json();
    })
  )
)
.then(results => {
  console.log('所有商品添加完成:', results);
})
.catch(error => {
  console.error('添加过程出错:', error);
});

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