ReactJS无按钮数字相加问题：出现NaN而非预期数值

问题原因 #

你得到NaN的核心原因是：传递给parseInt的apples、mango或orange参数中存在无效值（比如空字符串、undefined，或是包含非数字字符），导致parseInt返回NaN——而NaN和任何数值相加的结果仍然是NaN。

解决方法 #

1. 安全转换数字并设置默认值

修改addNum函数，确保每个参数都能被安全转换为数字，空值或无效值自动转为0：

// Defining useState
const [ totalCount, setTotalCount ] = useState(0)

// User Can change count of fruits by increment or decrement operator
const addNum = (apples, mango, orange) => {
  // 将每个参数转为数字，无效值默认取0
  const appleCount = Number(apples) || 0;
  const mangoCount = Number(mango) || 0;
  const orangeCount = Number(orange) || 0;
  
  setTotalCount(appleCount + mangoCount + orangeCount)
}

console.log("Total Number of Fruits", totalCount)

2. 确保输入状态的有效性

如果水果数量是从输入框获取的，要处理输入为空的情况，避免传递空值给addNum，同时实现无按钮自动计算：

// 新增每个水果的状态管理
const [apples, setApples] = useState(0);
const [mango, setMango] = useState(0);
const [orange, setOrange] = useState(0);

// 统一处理输入变化，空输入自动设为0
const handleInputChange = (setter) => (e) => {
  const value = e.target.value === "" ? 0 : e.target.value;
  setter(value);
};

// 监听水果数量变化，自动触发总数计算
useEffect(() => {
  addNum(apples, mango, orange);
}, [apples, mango, orange]);

// 对应输入框示例
return (
  <div>
    <input type="number" value={apples} onChange={handleInputChange(setApples)} />
    <input type="number" value={mango} onChange={handleInputChange(setMango)} />
    <input type="number" value={orange} onChange={handleInputChange(setOrange)} />
    <p>Total: {totalCount}</p>
  </div>
);

关键说明 #

• 使用Number()替代parseInt能更灵活处理空值和数字字符串，配合|| 0可确保无效值被转为0。
• 通过useEffect监听水果数量状态的变化，用户修改输入时会自动触发总数计算，完全不需要显式按钮。

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