React中按分组索引维护Addon多维状态数组的实现问题

1. 先明确目标状态结构 #

先把你要的结构定义清楚，避免歧义，比如：

// 按组索引分组，每组内以SKU为键存储汇总数据
const addonSummary = [
  // 组索引0
  {
    "sku1": { quantity: 2, totalPrice: 20 },
    "sku2": { quantity: 1, totalPrice: 15 }
  },
  // 组索引1
  {
    "sku3": { quantity: 3, totalPrice: 30 }
  }
]

2. 核心问题：React状态必须不可变更新 #

直接修改数组/对象的属性不会触发React重渲染，必须生成全新的状态引用，逐层复制原结构再修改才有效。

3. 具体实现代码 #

假设你有一个更新函数，接收组索引groupIndex、SKUsku、数量变化值deltaQuantity、单品价格price，直接替换你原来的更新逻辑即可：

// Context中的状态更新函数
const updateAddonSummary = (groupIndex, sku, deltaQuantity, price) => {
  setAddonSummary(prevSummary => {
    // 1. 复制整个原数组，避免直接修改原状态
    const newSummary = [...prevSummary];
    
    // 2. 取出当前组的对象，不存在就初始化空对象
    const currentGroup = newSummary[groupIndex] || {};
    // 3. 复制当前组的对象，防止修改原组数据
    const newGroup = { ...currentGroup };
    
    // 4. 处理目标SKU的汇总数据
    const existingItem = newGroup[sku] || { quantity: 0, totalPrice: 0 };
    // 确保数量不会变成负数
    const newQuantity = Math.max(0, existingItem.quantity + deltaQuantity);
    const newTotalPrice = newQuantity * price;
    
    // 5. 更新组内SKU数据：数量>0就保留，否则删除该SKU
    if (newQuantity > 0) {
      newGroup[sku] = { quantity: newQuantity, totalPrice: newTotalPrice };
    } else {
      delete newGroup[sku];
    }
    
    // 6. 把新组放回数组对应位置
    newSummary[groupIndex] = newGroup;
    
    return newSummary;
  });
};

4. 常见错误避坑 #

• 绝对不能直接写prevSummary[groupIndex][sku].quantity += deltaQuantity，这属于修改原状态，React检测不到变化
• 不要用splice、push这类会修改原数组的方法，一律用扩展运算符(...)或map生成新数组
• 嵌套对象必须逐层复制，不能只复制最外层数组

5. 批量更新优化（可选） #

如果要处理大量addon数据，一次性批量更新能减少重渲染次数：

const batchUpdateAddons = (updates) => {
  setAddonSummary(prevSummary => {
    let newSummary = [...prevSummary];
    updates.forEach(({ groupIndex, sku, deltaQuantity, price }) => {
      // 复用单个更新的逻辑
      const currentGroup = newSummary[groupIndex] || {};
      const newGroup = { ...currentGroup };
      const existingItem = newGroup[sku] || { quantity: 0, totalPrice: 0 };
      const newQuantity = Math.max(0, existingItem.quantity + deltaQuantity);
      const newTotalPrice = newQuantity * price;
      
      if (newQuantity > 0) {
        newGroup[sku] = { quantity: newQuantity, totalPrice: newTotalPrice };
      } else {
        delete newGroup[sku];
      }
      newSummary[groupIndex] = newGroup;
    });
    return newSummary;
  });
};

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