React Redux购物车总价返回NaN但总数量正常，求排查方案

嘿，我来帮你搞定这个总价显示NaN的问题！首先，NaN通常是因为非数字值参与了计算，咱们一步步排查解决：

可能的问题根源 #

• 你的购物车项（cart item）里，item.price或item.quantity可能不是数字类型——比如是字符串（比如"29.99"而不是29.99），或者是undefined/null。当这些值和数字相乘时，就会得到NaN。
• 部分商品项可能缺失price或quantity属性，直接访问会得到undefined，计算时自然就出问题了。

修复方案 #

1. 给计算逻辑添加类型校验与默认值 #

修改你的getTotal函数，确保参与计算的都是有效数字：

const getTotal = () => {
  let totalQuantity = 0;
  let totalPrice = 0;
  cart.forEach((item) => {
    // 确保quantity是数字，默认0
    const safeQuantity = typeof item.quantity === 'number' ? item.quantity : 0;
    // 确保price是数字，默认0
    const safePrice = typeof item.price === 'number' ? item.price : 0;
    
    totalQuantity += safeQuantity;
    totalPrice += safePrice * safeQuantity;
  });
  return { totalPrice, totalQuantity };
};

2. 优化性能：避免重复计算 #

你现在的代码在渲染时调用了两次getTotal()，会导致cart数组被遍历两次。用useMemo缓存计算结果，提升组件性能：

import { useSelector, useMemo } from "react-redux";

function Total() {
  const cart = useSelector((state) => state.cart);

  // 只有cart变化时才重新计算总价和总数量
  const { totalPrice, totalQuantity } = useMemo(() => {
    let totalQuantity = 0;
    let totalPrice = 0;
    cart.forEach((item) => {
      const safeQuantity = typeof item.quantity === 'number' ? item.quantity : 0;
      const safePrice = typeof item.price === 'number' ? item.price : 0;
      
      totalQuantity += safeQuantity;
      totalPrice += safePrice * safeQuantity;
    });
    return { totalPrice, totalQuantity };
  }, [cart]);

  return (
    <div className="total">
      <h2 className="order__summary">ORDER SUMMARY</h2>
      <div>
        <p className="total__p">
          total items in cart is {totalQuantity} -{" "}
          <strong> ${totalPrice.toFixed(2)}</strong>
        </p>
      </div>
    </div>
  );
}

export default Total;

3. 排查数据源（Redux Store） #

别忘了去检查Redux store里的cart数据，确认每个商品的price和quantity都是数字类型。如果是在添加商品到购物车时把价格存成了字符串，那最好在数据源层面修正，这才是彻底解决问题的关键。

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