React JS中计算百分比字符串数组平均值出现NaN的修复方案

你当前代码输出NaN的核心原因是：直接将字符串类型的百分比与数字累加，导致sum变成了拼接后的字符串（比如"075.0%50.0%..."），字符串除以数字自然会得到非数字结果。

以下是具体修复方案：

修复步骤 #

1. 字符串转数字：遍历数组时，先移除每个字符串末尾的%符号，再转换为浮点数字。
2. 正确累加数值：在reduce回调中，将转换后的数字累加到累加器上。
3. 格式化输出：计算出平均数值后，根据需求格式化（取整/保留小数），再拼接成UI需要的百分比字符串。

完整修复代码 #

const percentCorrects = [
  "75.0%", "50.0%", "66.66666666666666%", "66.66666666666666%",
  "33.33333333333333%", "58.333333333333336%", "50.0%", "66.66666666666666%",
  "41.66666666666667%", "75.0%", "41.66666666666667%", "50.0%",
  "50.0%", "72.72727272727273%"
];

// 计算总和：先转数字再累加
const sum = percentCorrects.reduce((accumulator, currentValue) => {
  const num = parseFloat(currentValue.replace('%', ''));
  return accumulator + num;
}, 0);

// 计算平均值
const averageValue = sum / percentCorrects.length;

// 格式化显示（两种可选方式）
// 方式1：取整，匹配你示例中的"48%"格式
const formattedAverage = `平均正确率：${Math.round(averageValue)}%`;
// 方式2：保留1位小数，比如"56.2%"
// const formattedAverage = `平均正确率：${averageValue.toFixed(1)}%`;

console.log("平均值（原始数值）：", averageValue);
console.log(formattedAverage);

React组件中使用示例 #

如果要在React UI中渲染结果，可以直接整合到组件里：

function AveragePercent() {
  const percentCorrects = [/* 你的百分比数组 */];
  
  const sum = percentCorrects.reduce((acc, curr) => {
    return acc + parseFloat(curr.replace('%', ''));
  }, 0);
  
  const average = sum / percentCorrects.length;
  const formattedText = `平均正确率：${Math.round(average)}%`;
  
  return <div className="average-display">{formattedText}</div>;
}

export default AveragePercent;

关键细节说明 #

• currentValue.replace('%', '')：移除字符串末尾的百分号，得到纯数字字符串。
• parseFloat()：将处理后的字符串转换为浮点数，确保能进行数值计算。
• Math.round()：对平均值取整，适合整数百分比的显示需求；如果需要保留小数，用toFixed(n)（n为小数位数），注意该方法返回的是字符串类型。

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