React中计算月度净薪资时返回NaN问题排查

• 输入值未做类型转换：React输入框的value默认是字符串类型，如果直接拿字符串做减法运算，会返回NaN。比如你的基本工资、税费、社保这些字段，必须先转成数字再计算。
  错误示例：

  const net = basicSalary - tax - socialSecurity;
  

  修正后：

  const net = Number(basicSalary) - Number(tax) - Number(socialSecurity);
  

• 状态初始值设置错误：如果把薪资、扣除项的state初始值设为空字符串''，初始渲染时计算就会触发NaN。应该把初始值设为0（数字类型）。
  错误示例：

  const [basicSalary, setBasicSalary] = useState('');
  

  修正后：

  const [basicSalary, setBasicSalary] = useState(0);
  

• 未处理空输入的情况：如果用户没填写某个字段，对应的state可能是空字符串或undefined，直接参与运算会产生NaN。可以给转换后的数字加默认值兜底：

  const net = (Number(basicSalary) || 0) - (Number(tax) || 0) - (Number(socialSecurity) || 0);
  

• 检查是否存在无效数学运算：比如税率计算里有没有除以0的情况，或者对非数字值执行了乘除等操作，这类场景也会返回NaN。

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