React代码仅支持个位数求和 无法计算逗号分隔多位数之和

问题表现 #

• 现有代码仅在输入逗号分隔的个位数时计算正常：例如输入1,2,3,4返回结果10，符合预期
• 输入包含多位数的逗号分隔内容时结果错误：例如输入12,12时返回结果6，与正确求和值24不符
• 目标效果：支持任意长度、逗号分隔的数字输入，返回正确的求和结果

问题复现代码 #

import React, { useState } from "react";

const Palindrome = () => {
  const [userInput, setUserInput] = useState("");
  const [userOutput, setuserOutput] = useState([]);

  const inputted = (number) => {
    const array = number.split(",");
    const sum = array.reduce((a, b) => (a += b));
    var convert = Array.from(String(sum), (num) => Number(num));
    const sum1 = convert.reduce((a, b) => (a += b));

    setuserOutput(sum1);
  };

  return (
    <div className="puzzleBox filterStringPB">
      <h4> Get the total of an array of</h4>
      <span className="puzzleText">Example: {JSON.stringify(names[0])}</span>
      <input
        className="inputLine"
        onChange={(e) => setUserInput(e.target.value)}
      />
      <button
        className="confirmationButton"
        onClick={() => inputted(userInput)}
      >
        {" "} 
        Compute{" "} 
      </button>
      <span className="resultsBox filterStringRB">
        check Result: {JSON.stringify(userOutput)}
      </span>
    </div>
  );
};

export default Palindrome;

错误原因 #

• 类型转换缺失：split(",")得到的数组元素全是字符串类型，直接调用reduce做+=运算时，执行的是字符串拼接而非数值加法。比如输入12,12时，这一步得到的是拼接后的字符串"1212"，而非数值24。
• 逻辑冗余错误：代码额外将拼接得到的字符串拆分为单个数字再次求和，个位数场景下这个逻辑刚好歪打正着：比如输入1,2,3,4时，字符串拼接结果为"1234"，拆分后求和1+2+3+4=10，刚好和正确结果一致；但多位数场景下拆分的是拼接后的字符串，计算逻辑完全偏离需求。
• reduce未传初始值：累加过程没有指定初始数值0，全程类型随数组元素变化，完全不受控。

修复代码 #

核心修改求和逻辑，去掉无意义的二次拆分步骤，拆分字符串后先做数值转换再累加，同时增加空值、非数字值过滤，兼容输入带空格、首尾多打逗号的异常场景：

const inputted = (number) => {
  // 拆分字符串、去除前后空格、转成数值，过滤无效值
  const numArray = number.split(",")
    .map(item => Number(item.trim()))
    .filter(num => !Number.isNaN(num));
  // 传入初始值0，保证全程做数值累加
  const sum = numArray.reduce((a, b) => a + b, 0);
  setuserOutput(sum);
};

注：原代码中示例行引用了未定义的names变量，属于无关遗留问题，可根据需要补全示例内容或直接移除该行。

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