React+TypeScript中number输入框初始值为空致找零计算异常

问题根源 #

React的setState是异步操作，调用setAmount(retrieved)后，组件状态amount不会立刻更新为新值。你在调用setAmount后马上执行props.onSetChange(amount)，此时传递的是更新前的旧状态（初始值为0），这就是第一次输入时计算逻辑拿到空/0值的原因。

修复方案 #

方案1：直接传递最新计算值（最简方案） #

不需要等待状态更新，直接把刚解析出的retrieved值传给回调函数：

const getInputHandler = (event: React.FormEvent<HTMLInputElement>) => {
  const retrieved = +(event.target as HTMLInputElement).value.trim();
  
  setAmount(retrieved);
  // 直接传递最新解析的数值，而非未更新的状态amount
  props.onSetChange(retrieved);
};

方案2：用useEffect监听状态变化（适合依赖状态的场景） #

如果业务逻辑需要依赖更新后的状态值，可以通过useEffect监听amount的变化，在状态更新完成后再调用回调：

import { useState, useEffect } from 'react'
import { changeCalculatorType } from '../../types/ReceivedComponentTypes';

const Received: React.FC<{ onSetChange: changeCalculatorType }> = (props) => {
  const [amount, setAmount] = useState(0);

  const getInputHandler = (event: React.FormEvent<HTMLInputElement>) => {
    const retrieved = +(event.target as HTMLInputElement).value.trim();
    setAmount(retrieved);
  };

  // 监听amount变化，状态更新后执行回调
  useEffect(() => {
    props.onSetChange(amount);
  }, [amount, props.onSetChange]);

  return (
    <>
      <input type="number" name="" id="" onChange={getInputHandler} />
    </>
  );
};

export default Received

额外优化建议 #

你的找零计算逻辑中，多次使用toFixed(2)转字符串再转数字，可能引发浮点数精度问题，建议统一处理数值类型：

const calculateChange: changeCalculatorType = (amountReceived) => {
  // 先把grandTotal转为固定两位小数的数值
  const grandTotalNum = Number(grandTotal.toFixed(2));
  let calculatedChange = 0;
  
  if (amountReceived > grandTotalNum) {
    calculatedChange = amountReceived - grandTotalNum;
    // 仅在最终结果时处理小数位数
    calculatedChange = Number(calculatedChange.toFixed(2));
  }
  
  setChange(calculatedChange);
  return calculatedChange;
};

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