如何按id过滤Redux购物车数组并同步数量到原productArray实现首页更新

云上老周

2026-9-26

解决思路

你不需要主动修改productArray，只要保证Redux中的cart是唯一的数量数据源，首页渲染时动态从cart中匹配对应商品的数量即可，具体修改如下：

1. 新增数量查询方法

根据商品ID从购物车数组中匹配对应数量，未加入购物车的商品默认返回数量1：

const getCurrentQuantity = (productId) => {
  const matchedItem = cart.find(item => item._id === productId)
  return matchedItem ? matchedItem.quantity : 1
}

2. 修正updateCart逻辑

你已经实现了购物车的数量增减功能，updateCart直接调用你现有的Redux修改购物车的方法即可，不需要额外操作productArray：

// type传'add'表示加1，传'decrease'表示减1
const updateCart = (productId, type) => {
  // 这里替换成你已经写好的修改Redux cart数量的触发逻辑即可
  dispatch(changeCartNum({ id: productId, operate: type }))
}

3. 修正首页JSX代码

删掉你在map中写死的item.quantity = 1逻辑，改为动态获取数量：

return (
  {productArray.map(item => {
    const quantity = getCurrentQuantity(item._id)
    return (
      <div key={item._id}>
        <div className="product-details">
          <div>{item.name}</div>
          <div>{item.price}</div>
          <div className="quantity">
            <button onClick={() => updateCart(item._id, 'decrease')}>-</button>
            <p>{quantity}</p>
            <button onClick={() => updateCart(item._id, 'add')}>+</button>
          </div>
        </div>
      </div>
    )
  })}
)