点击购物车商品编辑图标跳转至错误商品页面问题

问题根源 #

你的代码存在核心逻辑错误：

• cartItem通过cart[cart.length - 1]固定取购物车最后一项，addons变量也基于这个最后一项生成
• handleItemEdit函数依赖全局的addons，导致不管点击哪个商品，跳转判断逻辑都用最后一个商品的附加项状态，完全忽略当前点击商品的属性

修复方案 #

直接在点击事件中根据商品ID找到对应项，用它自身的addons判断跳转路由，无需全局的cartItem和addons变量：

// 移除原来的cartItem和addons useMemo代码

const handleItemEdit = useCallback((id: string) => {
  // 根据ID定位当前点击的购物车商品
  const targetItem = cart.find(item => item.id === id);
  // 取出该商品自身的附加项，默认空数组
  const targetAddons = targetItem?.item.addons || [];

  if (targetAddons.length > 0) {
    updateStepData(customizationStep.formKey, () => ({
      itemId: id
    }));
    navigate(`/checkout/addons`);  
  } else {
    navigate(`/checkout/customization`);
  }
}, [cart, navigate, updateStepData, customizationStep.formKey]);

修复说明 #

1. 精准定位目标商品：点击时通过传入的id在cart数组中找到对应商品，确保判断逻辑基于当前点击的商品属性
2. 移除全局依赖：不再依赖全局的cartItem和addons，避免复用错误数据
3. 修正依赖项：useCallback的依赖加入cart（确保cart更新时函数重新生成），同时补上其他用到的变量

验证场景 #

• 场景A：点击第一个带附加项的商品时，会读取该商品自身的addons，正确跳转到对应的addons页面，不会再指向最后一个商品
• 场景B：点击第一个无附加项的商品时，读取到空的targetAddons，会正确跳转到customization路由

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