React JS中如何根据相同ID对两个对象数组的数值进行相减

你可以通过遍历库存数组并匹配购物车项的方式实现需求，核心是遵守React状态不可变原则，通过创建新数组和对象来完成状态更新。以下是具体实现：

完整的handleUpdateStock函数实现 #

const handleUpdateStock = () => {
  // 遍历当前库存状态，生成新的库存数组
  const updatedStock = stock.map(stockItem => {
    // 在购物车中找到匹配id或name的项
    const matchedBasketItem = basket.find(
      basketItem => basketItem.id === stockItem.id || basketItem.name === stockItem.name
    );
    
    // 如果找到匹配项，计算新的amount；否则保持原数值
    const newAmount = matchedBasketItem 
      ? stockItem.amount - matchedBasketItem.amount 
      : stockItem.amount;
    
    // 返回新对象，避免修改原状态
    return { ...stockItem, amount: newAmount };
  });
  
  // 更新库存状态
  setStock(updatedStock);
};

代码说明 #

• 用map遍历库存数组：React状态不可直接修改，必须生成新数组才能触发组件重渲染
• find匹配购物车项：同时兼容id和name两种匹配条件，确保精准找到对应商品
• 创建新对象：通过扩展运算符{ ...stockItem }复制原商品属性，仅修改amount字段，保证状态不可变性
• 状态更新：将新数组传入setStock，完成库存数值的更新

替换原组件中的handleUpdateStock后，点击按钮库存会按照预期更新为：

Iphone - 20
Samsung - 28
Huawei - 10
Motorola - 20

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