看起来你的getBasketTotal函数本身逻辑是没问题的——用reduce累加商品价格的写法完全正确。问题大概率出在你往购物车添加商品的reducer逻辑上，导致购物车数组basket里永远只保留了最后添加的那一件商品，自然总价就等于这件商品的价格了。

第一步：检查reducer中添加商品的代码 #

你需要确认处理ADD_TO_BASKET（或者你自定义的添加商品action类型）的逻辑是否正确。

❌ 错误的写法（直接替换数组）：

// 假设你的reducer里是这样处理添加商品的
export const reducer = (state, action) => {
  switch(action.type) {
    case 'ADD_TO_BASKET':
      return {
        ...state,
        basket: [action.item] // 这里直接把basket替换成只包含当前item的新数组
      };
    // 其他case...
    default:
      return state;
  }
};

这种写法会每次添加商品时清空原有购物车，只保留当前添加的商品，所以basket.length永远是1，总价自然就是单个商品的价格。

✅ 正确的写法（在原有数组基础上追加）：

export const reducer = (state, action) => {
  switch(action.type) {
    case 'ADD_TO_BASKET':
      return {
        ...state,
        basket: [...state.basket, action.item] // 扩展原有basket数组，添加新商品
      };
    // 其他case...
    default:
      return state;
  }
};

这里用扩展运算符...state.basket保留原有购物车的所有商品，再把新的action.item追加到数组末尾，这样购物车数组才会累积多个商品。

第二步：验证购物车数组的内容 #

你可以在组件里或者getBasketTotal函数里加个日志，确认basket数组是否真的包含了所有添加的商品：

export const getBasketTotal = basket => {
  console.log("当前购物车商品列表：", basket); // 查看控制台输出，确认数组长度和内容
  return basket.reduce((amount, item) => item.price + amount, 0);
};

如果控制台里的basket数组只有一个元素，那就能确认是reducer的添加逻辑出问题了；如果数组有多个元素但总价还是不对，那再检查每个商品的price属性是否是数字类型（比如有没有写成字符串导致拼接而非相加的情况）。

第三步：确认组件中state的获取是否正确 #

你的组件里用useStateValue获取basket的写法看起来是对的：

const [{ basket }, dispatch] = useStateValue();

只要useStateValue是正确封装了Context和useReducer的自定义Hook，这部分就没问题。

按照上面的步骤排查修改后，购物车总价应该就能正确累加所有商品的价格了。

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