选择器取值相加返回NaN而非数字问题求助

看起来你在Redux连接的组件里，通过多个selector取值相加时得到了NaN，先把你提供的代码片段贴出来方便分析：

const Form = connect(state => { 
  const equipmentTotal = selector(state, 'equipment.total'); 
  const softwareTotal = selector(state, 'softwares.total'); 
  const thirdPartyEquipmentTotal = selector(state, 'thirdPartys.totalFees'); 
  const miscTotal = selector(state, 'miscTotal'); 
  const tradeInTotal = selector(state, 'orderHeader.tradein'); 
  return { 
    // 返回的数据格式...
  }
})(/* 你的组件 */);

NaN出现的核心原因是某个selector返回的值不是有效的数字类型——可能是undefined、null，或者是字符串形式的数字（比如"500"，直接和数字相加会变成字符串拼接，后续运算就会出NaN）。给你一套分步解决的方案：

1. 先排查异常值 #

在connect函数里加个控制台打印，看看每个selector的返回值到底是什么：

const Form = connect(state => { 
  const equipmentTotal = selector(state, 'equipment.total'); 
  const softwareTotal = selector(state, 'softwares.total'); 
  const thirdPartyEquipmentTotal = selector(state, 'thirdPartys.totalFees'); 
  const miscTotal = selector(state, 'miscTotal'); 
  const tradeInTotal = selector(state, 'orderHeader.tradein'); 

  // 打印所有值，看哪个是异常的
  console.log('各selector返回值:', {
    equipmentTotal, softwareTotal, thirdPartyEquipmentTotal, miscTotal, tradeInTotal
  });

  return { /* ... */ }
})(/* 你的组件 */);

打开浏览器控制台，就能一眼看到哪个值是undefined、null或者非数字的情况。

2. 给所有值做数字转换和兜底处理 #

针对每个selector的返回值，先转成数字，再把无效值（比如NaN、undefined）兜底成0，这样相加就都是合法的数字运算了：

const Form = connect(state => { 
  // 用Number()转换，转失败返回NaN，再用|| 0把无效值变成0
  const equipmentTotal = Number(selector(state, 'equipment.total')) || 0; 
  const softwareTotal = Number(selector(state, 'softwares.total')) || 0; 
  const thirdPartyEquipmentTotal = Number(selector(state, 'thirdPartys.totalFees')) || 0; 
  const miscTotal = Number(selector(state, 'miscTotal')) || 0; 
  const tradeInTotal = Number(selector(state, 'orderHeader.tradein')) || 0; 

  // 现在相加就不会出现NaN了
  const total = equipmentTotal + softwareTotal + thirdPartyEquipmentTotal + miscTotal + tradeInTotal;

  return { 
    total,
    // 其他需要返回的数据...
  }
})(/* 你的组件 */);

如果tradeInTotal是抵扣用的负数，这个逻辑也完全适用，负数会自动从总和里减去，符合业务需求。

额外优化（可选） #

如果你的业务涉及小数金额，担心精度问题，可以用parseFloat()替代Number()，或者最后用total.toFixed(2)保留两位小数，但这一步是解决NaN之后的优化项，先搞定核心问题再说。

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