如何优雅合并购物车addCartItem与removeCartItem函数？

两个函数的重复逻辑完全可以抽离，原代码除了冗余外，removeCartItem还存在逻辑错误：要移除的商品不在购物车中时，会错误新增一条数量为1的商品记录，重构时可以一并修复。

重构思路 #

• 提取通用的购物车商品更新函数，将数量变化值作为参数传入，复用查找、遍历的公共逻辑
• 区分加购、减购场景下「商品不存在」的分支处理
• 可选增加「数量减到0自动移除商品」的逻辑，符合常规购物车交互
• 顺带修复原代码中setCartItems直接引用外部state可能触发的闭包问题，改用函数式更新获取最新状态

重构后代码 #

/**
 * 通用购物车商品数量更新方法
 * @param {Array} cartItems 原购物车商品列表
 * @param {Object} productToModify 待操作的商品对象
 * @param {number} quantityChange 数量变更步长：加购传1，减购传-1
 * @returns {Array} 更新后的购物车列表
 */
const updateCartItemQuantity = (cartItems, productToModify, quantityChange) => {
  const existingCartItem = cartItems.find(cartItem => cartItem.id === productToModify.id);

  // 商品不存在时的分支处理
  if (!existingCartItem) {
    return quantityChange > 0 
      ? [...cartItems, { ...productToModify, quantity: 1 }]
      : cartItems;
  }

  // 商品存在时遍历更新数量，过滤掉数量减为0的商品
  return cartItems
    .map(cartItem => {
      if (cartItem.id !== productToModify.id) return cartItem;
      return { ...cartItem, quantity: cartItem.quantity + quantityChange };
    })
    .filter(cartItem => cartItem.quantity > 0);
};

// 对外暴露的加购、减购方法
const addItemToCart = (productToModify) => {
  setCartItems(prevCart => updateCartItemQuantity(prevCart, productToModify, 1));
};

const removeItemFromCart = (productToModify) => {
  setCartItems(prevCart => updateCartItemQuantity(prevCart, productToModify, -1));
};

优化点说明 #

• 公共逻辑只维护一份，后续如果要加购上限、特殊商品数量校验等规则，只需要修改通用函数即可
• 修复了原减购函数的逻辑错误
• 函数式更新状态避免闭包导致的状态更新异常
• 扩展性更强，后续如果要做「直接设置商品为指定数量」「清空某商品」等功能，都可以基于这个通用函数扩展

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