解决JavaScript/React中累加计算返回NaN的常见问题

const productsObj = [
  { id: 1, name: 'Sweater', price: 2300, total: 2300 },
  { id: 2, name: 'Shirt', price: 1500, total: 1500 },
];

// 在React组件中，通常会使用 useState 管理状态
// const [products, setProducts] = useState(productsObj);

// 尝试计算所有产品总价的函数
const allTotal = () => {
  let sum; // 声明了 sum，但未赋初始值，此时 sum 为 undefined

  productsObj.forEach((e) => {
    // 第一次迭代时：sum (undefined) + e.total (数字) => NaN
    // 之后的所有迭代：NaN + 任何数字 => NaN
    sum += e.total;
  });

  return sum; // 最终结果为 NaN
};

console.log(allTotal()); // 输出: NaN

const productsObj = [
  { id: 1, name: 'Sweater', price: 2300, total: 2300 },
  { id: 2, name: 'Shirt', price: 1500, total: 1500 },
];

const allTotal = () => {
  let sum = 0; // 关键：初始化 sum 为 0

  productsObj.forEach((e) => {
    // 第一次迭代时：sum (0) + e.total (数字) => e.total 的值
    // 之后的所有迭代：数字 + 数字 => 数字
    sum += e.total;
  });

  return sum; // 正常累加结果
};

console.log(allTotal()); // 输出: 3800 (2300 + 1500)

const productsObj = [
  { id: 1, name: 'Sweater', price: 2300, total: 2300 },
  { id: 2, name: 'Shirt', price: 1500, total: 1500 },
];

const allTotalWithReduce = () => {
  return productsObj.reduce((accumulator, currentProduct) => {
    return accumulator + currentProduct.total;
  }, 0); // 这里的 0 就是累加器的初始值
};

console.log(allTotalWithReduce()); // 输出: 3800

import React, { useState, useEffect } from 'react';

const initialProducts = [
  { id: 1, name: 'Sweater', price: 2300, minQuantity: 1, quantity: 1, total: 2300 },
  { id: 2, name: 'Shirt', price: 1500, minQuantity: 1, quantity: 1, total: 1500 },
];

function CartPage() {
  const [products, setProducts] = useState(initialProducts);

  // 当商品数量变化时更新单个商品的 total
  const handleQuantityChange = (productId, event) => {
    const newQuantity = event.target.value; // 从输入框获取的值是字符串

    setProducts(
      products.map((item) => {
        if (item.id === productId) {
          // 确保 quantity 和 price 都是数字类型进行计算
          const quantityAsNumber = Number(newQuantity);
          const priceAsNumber = Number(item.price);
          return {
            ...item,
            quantity: quantityAsNumber,
            total: priceAsNumber * quantityAsNumber,
          };
        } else {
          return item;
        }
      })
    );
  };

  // 计算所有商品的总价
  const calculateAllTotal = () => {
    return products.reduce((accumulator, currentProduct) => {
      // 确保 currentProduct.total 是数字，以防万一
      const productTotal = Number(currentProduct.total);
      return accumulator + productTotal;
    }, 0); // 累加器初始值为 0
  };

  const totalCartValue = calculateAllTotal();

  return (
    <div>
      <h1>购物车</h1>
      {products.map((product) => (
        <div key={product.id} style={{ marginBottom: '10px', border: '1px solid #ccc', padding: '10px' }}>
          <h3>{product.name}</h3>
          <p>单价: {product.price}</p>
          <p>
            数量:
            <input
              type="number"
              min={product.minQuantity}
              value={product.quantity}
              onChange={(e) => handleQuantityChange(product.id, e)}
            />
          </p>
          <p>小计: {product.total}</p>
        </div>
      ))}
      <h2>购物车总计: {totalCartValue}</h2>
    </div>
  );
}

export default CartPage;