React中如何替换对象数组中的指定对象以用于表单提交？

先指出你现有代码里的几个核心问题：

1. carts是单个对象而非数组，直接调用map方法会报错——对象没有map属性。
2. body里的carts: cartsObj是未定义变量，应该改成你已经定义好的cartsObjForSave。
3. 直接在map里给临时变量c赋值的逻辑不生效，map需要返回新对象生成新数组，且要遵循React数据不可变性原则，避免直接修改原对象。

根据你的需求，分两种常见场景给出实现方式：

场景1：更新单个API返回的cart组（替换名称和对应数量） #

如果你的目标是修改从API获取的单个carts对象，更新它的名称和内部三个cart的数量，代码如下：

// 处理state中null的情况，避免parseInt得到NaN
const cartsObjForSave = [
  {
    "id": "full",
    "name": "Full Cart",
    "weight": 0,
    "volume": 0,
    "dimensions": { "length": 0, "breadth": 0, "height": 0 },
    "quantity": parseInt(state.fullCarts || 0)
  },
  {
    "id": "half",
    "name": "Half Cart",
    "weight": 0,
    "volume": 0,
    "dimensions": { "length": 0, "breadth": 0, "height": 0 },
    "quantity": parseInt(state.halfCarts || 0)
  },
  {
    "id": "smu",
    "name": "SMU",
    "weight": 0,
    "volume": 0,
    "dimensions": { "length": 0, "breadth": 0, "height": 0 },
    "quantity": parseInt(state.smu || 0)
  }
];

// 生成更新后的cart组对象，保留原对象的其他属性，只修改name、id和carts数组的quantity
const updatedCartGroup = {
  ...carts,
  id: state.name || carts.id, // 若name为空则保留原id
  name: state.name || carts.name, // 若name为空则保留原名称
  carts: carts.carts.map(originalCart => {
    // 找到对应id的更新项
    const updatedItem = cartsObjForSave.find(item => item.id === originalCart.id);
    // 合并原对象和更新的quantity，保留原有的weight、volume等属性
    return updatedItem ? { ...originalCart, quantity: updatedItem.quantity } : originalCart;
  })
};

// 最终请求体就是这个更新后的对象
const finalRequestBody = updatedCartGroup;

场景2：在多个cart组的数组中替换/添加目标组 #

如果你的API返回的是多个cart组组成的数组（比如const cartsArray = [carts, ...otherGroups]），需要替换其中与state.name匹配的组，若不存在则追加，代码如下：

const cartsObjForSave = [
  // 同场景1的定义，略
];

const newCartGroup = {
  id: state.name,
  name: state.name,
  carts: cartsObjForSave
};

// 检查是否存在匹配name的组
const hasMatchingGroup = cartsArray.some(group => group.name === state.name);

// 生成最终请求数组：存在则替换，不存在则追加
const finalRequestBody = hasMatchingGroup 
  ? cartsArray.map(group => group.name === state.name ? newCartGroup : group)
  : [...cartsArray, newCartGroup];

关键注意点 #

• 保持数据不可变性：通过扩展运算符...创建新对象/数组，避免直接修改原数据（React状态管理的最佳实践）。
• 处理空值：用state.fullCarts || 0确保parseInt不会得到NaN。
• 优先用id匹配：如果id是唯一标识，比name更可靠，避免同名冲突。

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