在React项目开发时，处理数值求和逻辑是常见需求，但不少开发者都会遇到计算结果返回NaN的情况，这会导致页面展示异常，甚至引发后续业务逻辑报错。NaN是Not a Number的缩写，代表非数值类型，通常出现在数值运算中操作数不符合数值要求时。
常见导致求和结果为NaN的原因
1. 参与计算的数据类型错误
最常见的情况是接口返回的数值字段实际是字符串类型，比如后端返回的price字段值是"100"而不是100，如果直接对字符串做加法运算，会触发字符串拼接，当拼接过程中出现非纯数字字符串时就会返回NaN。
2. 数据存在空值或未定义
如果求和的数据源中存在null、undefined或者空字符串，参与数值运算时就会得到NaN。比如从表单中获取用户输入的数值，用户没有填写内容时，对应的值是空字符串，直接参与求和就会出错。
3. 数据转换逻辑错误
使用parseInt、parseFloat转换数据时，如果转换失败会返回NaN，比如转换"abc"这样的字符串，结果就是NaN，再参与求和自然也会得到NaN。
对应的解决方案
1. 先校验并转换数据类型
在求和之前，先对每一项参与计算的数据做类型校验，确保是数值类型再进行运算。可以使用Number函数做转换，同时处理转换失败的情况。
// 定义待求和的数组，模拟接口返回的数据
const dataList = [
{ id: 1, value: "10" },
{ id: 2, value: 20 },
{ id: 3, value: null },
{ id: 4, value: "30" }
];
// 求和函数，先处理每一项数据
const calculateSum = (list) => {
let sum = 0;
list.forEach(item => {
// 将值转换为数值，转换失败则使用0作为默认值
const num = Number(item.value);
// 判断转换后是否为有效数字，不是的话取0
sum += isNaN(num) ? 0 : num;
});
return sum;
};
console.log(calculateSum(dataList)); // 输出60
2. 给数据设置默认值
在数据获取阶段就设置默认值，避免空值、未定义的情况参与计算。比如在解构数据或者从接口返回后处理时，给数值字段设置默认值为0。
// 模拟接口返回的数据，部分字段可能缺失
const responseData = [
{ id: 1, price: 15 },
{ id: 2 }, // 没有price字段
{ id: 3, price: "25" }
];
// 处理数据，给price设置默认值0
const processedData = responseData.map(item => ({
...item,
price: item.price ?? 0 // 如果price是null或者undefined，就用0
}));
// 求和
const total = processedData.reduce((acc, cur) => {
const num = Number(cur.price);
return acc + (isNaN(num) ? 0 : num);
}, 0);
console.log(total); // 输出40
3. 使用安全的转换方法
如果确定数据大部分是字符串形式的数值，可以使用parseFloat配合默认值处理，避免转换失败返回NaN。如果是整数场景，也可以用parseInt，同时指定进制避免意外问题。
const strList = ["10", "20", "abc", "30"];
const safeSum = (arr) => {
return arr.reduce((sum, item) => {
// 使用parseFloat转换，转换失败返回NaN，再用isNaN判断取默认值
const num = parseFloat(item);
return sum + (isNaN(num) ? 0 : num);
}, 0);
};
console.log(safeSum(strList)); // 输出60
注意事项
在React组件中处理求和逻辑时，如果是依赖状态或者接口数据的变化重新计算，建议把求和逻辑放在useMemo中，避免每次渲染都重复计算，提升性能。同时如果数据来源是用户输入，还需要额外做输入校验，避免用户输入非数字内容导致计算异常。
注意：isNaN函数会先尝试将参数转换为数值再判断，所以如果传入字符串"10"会返回false，传入"abc"会返回true，使用时要注意这个特性。