数组值求和异常：按type取值后结果为字符串拼接而非数值相加

核心问题分析 #

1. 字符串类型引发拼接：你的amount和amount2字段都是字符串类型，直接用+运算符会触发字符串拼接，而非数值加法。哪怕reduce初始值是0，第一次运算时数字0会被转为字符串，后续所有操作都会变成拼接。
2. 函数调用逻辑错误：total函数设计为接收数组，但实际调用时你传入的是单个对象（array.map(item => total(item))），导致函数内data.length判断不成立，直接返回0，完全偏离了求和逻辑。

修复后的代码 #

const App = (props) => {
  const array = [
    {
      amount: "12",
      amount2: "0",
      type: "Purchased"
    },
    {
      amount: "0",
      amount2: "34",
      type: "Donation"
    }
  ];

  const total = (data) => {
    if (!data.length) return 0;
    // 直接在reduce中完成类型转换与累加，省去中间数组
    return data.reduce((sum, item) => {
      const value = item.type === "Purchased" ? Number(item.amount) : Number(item.amount2);
      return sum + value;
    }, 0);
  };

  return (
    <>
      {/* 传入整个数组给total函数，直接获取总和 */}
      {array.length > 0 ? total(array) : ""}
    </>
  );
};

export default App;

关键修改点 #

• 强制类型转换：用Number()把字符串格式的金额转为数值，确保加法运算正常执行。
• 简化求和逻辑：去掉冗余的tempSub数组，直接在reduce中完成累加，减少不必要的内存占用。
• 修正调用方式：将整个array传入total函数，符合函数的设计初衷，避免逻辑混乱。
• 简化边界判断：空数组直接返回0，代码更简洁。

额外场景：若需显示单个项数值+总和 #

如果你的需求是先展示每个item对应的数值，再显示总和，可以用以下代码：

const App = (props) => {
  const array = [
    {
      amount: "12",
      amount2: "0",
      type: "Purchased"
    },
    {
      amount: "0",
      amount2: "34",
      type: "Donation"
    }
  ];

  // 获取单个item的对应数值
  const getItemValue = (item) => {
    return item.type === "Purchased" ? Number(item.amount) : Number(item.amount2);
  };

  // 计算总和
  const calculateTotal = (data) => {
    return data.reduce((sum, item) => sum + getItemValue(item), 0);
  };

  return (
    <>
      {array.map((item, index) => (
        <div key={index}>当前项数值：{getItemValue(item)}</div>
      ))}
      <div>总和：{calculateTotal(array)}</div>
    </>
  );
};

export default App;

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