React中数字输入框出现NaN问题求助

数据老陈

2026-6-25

React货币转换网站：输入数字后目标框显示NaN的排查与解决

可能的原因及对应的排查/解决步骤：

汇率数据未正确加载或初始值无效
如果转换逻辑依赖exchangeRate这类变量，若它初始为undefined/null，或API请求失败未拿到有效值，那么sourceAmount * exchangeRate必然得到NaN。
解决：给汇率变量设置合理初始值（比如1），同时在API请求完成前给计算加兜底：
```
// 示例计算逻辑
const parsedSource = parseFloat(sourceAmount) || 0;
const targetAmount = parsedSource * (exchangeRate || 1);
```

sourceAmount的空值/非数字未处理
当输入框为空时，e.target.value是空字符串，parseFloat("")会返回NaN，后续计算自然得到NaN。
解决：在handleSourceAmountChange里处理空输入：

function handleSourceAmountChange(e) {
  const inputValue = e.target.value;
  // 空输入时设为0，避免后续计算出NaN
  setSourceAmount(inputValue === "" ? "0" : inputValue);
}
// 或者直接存储数字类型的state
function handleSourceAmountChange(e) {
  const numValue = parseFloat(e.target.value);
  setSourceAmount(isNaN(numValue) ? 0 : numValue);
}

targetAmount渲染未做NaN兜底
即使计算过程有疏漏，也可以在渲染时避免显示NaN：
```
<input type="number" value={isNaN(targetAmount) ? 0 : targetAmount} readOnly />
```

检查state更新与计算的时机
确保在汇率数据更新后再重新计算目标金额，比如用useEffect监听相关变量变化：

useEffect(() => {
  if (exchangeRate && !isNaN(parseFloat(sourceAmount))) {
    const parsed = parseFloat(sourceAmount);
    setTargetAmount(parsed * exchangeRate);
  } else {
    setTargetAmount(0);
  }
}, [sourceAmount, exchangeRate]);