购物车数组为空时useEffect未触发小计更新的问题求助

核心问题1：localStorage 同步时机错误 #

你在 handleDeleteProduct 里调用 setCart 后立即用 cart 更新 localStorage，但 setCart 是异步操作，此时的 cart 还是更新前的旧值。当删除最后一个商品时，localStorage 里存的依然是包含该商品的数组，若购物车初始状态从 localStorage 读取，会出现状态与存储不一致的问题，间接导致 useEffect 触发异常。

核心问题2：小计计算函数未处理空数组场景 #

如果 countSubTotal 未正确处理空购物车（比如 reduce 未设置初始值），购物车清空时函数会抛出错误，导致 handleSubTotal 无法执行，小计自然不会更新。

修复步骤 #

1. 修正删除商品函数，移除错误的 localStorage 操作

把 localStorage 同步逻辑从删除函数中移出，避免使用旧状态：

const handleDeleteProduct = () => {
  // 使用函数式更新确保拿到最新的购物车状态
  setCart(prevCart => prevCart.filter(itemInCart => itemInCart.item.id !== item.item.id));
}

2. 新增 useEffect 同步购物车状态到 localStorage

专门用一个副作用监听购物车变化，确保存储的是最新状态：

useEffect(() => {
  localStorage.setItem("cart", JSON.stringify(cart));
}, [cart]);

3. 确保小计计算函数兼容空数组

修改 countSubTotal，给 reduce 设置初始值 0，避免空数组报错：

const countSubTotal = () => {
  return cart.reduce((total, cartItem) => {
    return total + (cartItem.item.price * (cartItem.quantity || 1));
  }, 0); // 初始值设为0，空数组时直接返回0
}

4. 保留原有的小计更新 useEffect

原有的副作用逻辑没问题，只要依赖的 cart 状态正确更新，就会触发小计计算：

useEffect(() => {
  handleSubTotal(countSubTotal());    
}, [cart])

修改后，删除最后一个商品时，购物车状态会正确变为空数组，触发两个 useEffect：一个同步空数组到 localStorage，另一个计算并更新小计为0。

内容的提问来源于stack exchange，提问作者Taha Tüzgen