React 购物车统计总商品数仅统计唯一商品 重复数量未累加问题求助

问题排查与解决思路 #

• 检查useEffect依赖项是否正确配置
  必须把items.cart加入useEffect的依赖数组，否则购物车商品变动时，统计逻辑不会重新执行，总数值也不会更新。
• 将计算得到的总数同步到状态
  你当前仅在useEffect内部计算了total，没有将其存入状态同步到视图，UI层自然不会展示最新的统计结果。
• 处理quantity字段的边界情况
  部分场景下quantity可能是字符串类型、或者未定义，累加前要先转为数字，同时加兜底逻辑避免出现NaN。
• 确认页面渲染的Total Items绑定的是新计算的总数字段，而非原来统计唯一商品数的字段。

修正后的示例代码 #

import { useState, useEffect } from 'react'

// 组件内部逻辑
const [totalItems, setTotalItems] = useState(0)

useEffect(() => {
  // 加兜底逻辑：cart不存在默认空数组，quantity不存在默认0，同时转为数字类型
  const total = (items.cart || []).reduce((amount, item) => {
    return amount + Number(item.quantity || 0)
  }, 0)
  setTotalItems(total)
}, [items.cart]) // 必须添加依赖项触发重新计算

// 视图渲染处绑定totalItems
// <span>Total Items: {totalItems}</span>

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