React输入框数值累加逻辑异常：输入触发无限循环问题排查

你遇到的无限循环，核心问题有两个：

1. 数值计算逻辑错误：你把输入框的当前完整值当成了用户输入的单个数字来计算，导致每次更新后的结果和预期不符，且不断产生新的状态值。
2. 状态更新触发重复回调：每次调用setFormData更新状态后，NumericFormat组件会重新渲染并触发onValueChange，而你的处理函数又会基于新的输入值再次计算更新，形成循环。

核心优化点 #

• 用整数存储金额的分位数，避免浮点运算精度问题，同时简化累加逻辑。
• 确保状态更新后，输入框显示的值和NumericFormat返回的值完全一致，避免重复触发回调。

修正后的完整代码 #

import { useState, forwardRef } from 'react'
import { TextField } from '@mui/material'
import { NumericFormat } from 'react-number-format';
import PropTypes from 'prop-types';


const Example = (props) => {
  // 用整数存储分位数，初始0对应0.00元
  const [minSpendCents, setMinSpendCents] = useState(0);

  const handleMinChange = (event) => {
    const currentValueStr = event.target.value;
    const currentValue = parseFloat(currentValueStr);
    
    if (isNaN(currentValue)) return;
    
    // 转换为分位数，用Math.round避免浮点精度误差
    const currentCents = Math.round(currentValue * 100);
    const previousCents = minSpendCents;

    // 验证输入逻辑：用户输入单个数字后，当前分位数 = 之前的分位数*10 + 输入数字（0-9）
    const inputDigit = currentCents - previousCents * 10;
    if (inputDigit >= 0 && inputDigit <= 9) {
      setMinSpendCents(currentCents);
    }
  }
  
  // 转换为保留两位小数的元字符串，用于显示
  const displayValue = (minSpendCents / 100).toFixed(2);

  return (
     <TextField
       fullWidth
       name='minSpend'
       label='Min Spend'
       value={displayValue}
       onChange={handleMinChange}
       InputProps={{
         inputComponent: NumericFormatCustom,
       }}
      />
     )
    }

const NumericFormatCustom = forwardRef(function NumericFormatCustom(props, ref) {
  const { onChange, ...other } = props

  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          }
        })
      }}
      thousandSeparator
      prefix='$'
      decimalSeparator="."
      allowDecimal
      allowNegative={false}
    />
  )
})

NumericFormatCustom.propTypes = {
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

优化说明 #

1. 分位数存储：把金额以分的整数形式存在状态中，彻底避免浮点运算的精度问题，累加逻辑更直观：
   • 初始0分 → 输入1 → 0*10+1=1分 → 显示0.01元
   • 1分 → 输入1 →1*10+1=11分 → 显示0.11元
2. 循环终止逻辑：当状态更新后，输入框的displayValue和NumericFormat返回的纯数字值完全一致，此时handleMinChange会检测到当前分位数和状态值相同，不会再次触发状态更新，循环终止。
3. 输入有效性校验：只允许输入0-9的单个数字，避免非法输入导致的异常。

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