React购物车商品总价求和返回NaN问题求助

1. 求和变量未初始化 #

你的allTotal函数中，sum变量没有初始值，默认是undefined。当执行sum += e.total时，undefined + 数字的结果就是NaN。

修复代码：

const allTotal = () => {
  let sum = 0; // 初始化sum为0
  products.forEach((e) => {
    sum += e.total;
  });
  return sum;
};

2. 输入框值为字符串类型 #

输入框的event.target.value默认是字符串，虽然JavaScript会隐式转换为数字相乘，但如果输入非数字内容（比如字母、符号），会直接导致total变成NaN，最终求和结果也会是NaN。建议显式转换为数字类型。

3. 变量未定义错误 #

原onChange回调中使用了e.id和e.price，但这个e并没有被定义，会导致e.price为undefined，相乘后total变成NaN。你需要在渲染每个商品时，将当前商品对象作为参数传入onChange回调，完整修复后的代码示例如下：

渲染商品及处理数量变化：

// 渲染商品列表
{products.map(item => (
  <div key={item.id}>
    <input 
      type="number" 
      value={item.quantity || 1} 
      onChange={(event) => handleQuantityChange(event, item)}
    />
  </div>
))}

// 处理数量变化的函数
const handleQuantityChange = (event, item) => {
  const quantity = Number(event.target.value);
  setProducts(prevProducts => 
    prevProducts.map(product => {
      if (product.id === item.id) {
        return {
          ...product,
          quantity: quantity,
          total: product.price * quantity,
        };
      }
      return product;
    })
  );
};

这样就能保证total计算正确，求和时不会出现NaN了。

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