React 受控输入框onChange清空时state残留旧值问题

• React函数组件中useState触发的状态更新是异步批处理机制，同一个事件回调内调用setXxx后，当前函数作用域（闭包）里的状态变量还是上一次渲染缓存的旧值，所以你在handleBuyChange里紧跟set方法打印日志，拿到的永远是更新前的旧值，不是最新状态。
• type="number"类型的输入框被完全清空时，e.target.value返回的是空字符串''，不是数字0，你直接把空字符串存入state后，后续做数值计算时会触发隐式类型转换，极易出现NaN、旧值残留导致的计算错误。
• 代码中分支判断使用松散相等==，存在类型隐式转换导致分支判断错误的风险，可能出现状态没有按预期更新的问题。

1. 状态更新后需要执行计算、日志打印等逻辑时，不要在set方法后立刻读取当前闭包的旧状态，放到useEffect中监听对应状态变化后再执行，保证拿到的是最新值。
2. 对number输入框的返回值做格式化处理：输入为空时统一转换为0（或你业务需要的空态默认值），其余值转为数字类型后再存入state，避免空字符串导致计算异常。
3. 分支判断改用严格相等===，规避隐式类型转换带来的判断错误。

修复后的可运行代码如下：

import React, { useState, useEffect } from "react";

const App = () => {
  const [buyPrice, setBuyPrice] = useState(8000);
  const [buyAMount, setBuyAMount] = useState(0);
  const [buy_total, setBuy_total] = useState(0);

  // 状态更新后执行依赖最新值的逻辑
  useEffect(() => {
    console.log('当前最新状态：', buyPrice, buyAMount, buy_total);
    // 计算逻辑可放在此处，例如自动计算总价：
    // if (buyPrice && buyAMount) setBuy_total(Number(buyPrice) * Number(buyAMount))
  }, [buyPrice, buyAMount, buy_total])

  const handleBuyChange = (e) => {
    const { name, value } = e.target;
    // 格式化输入值：空输入转0，其余转数字
    const formattedVal = value === '' ? 0 : Number(value);
    
    if (name === 'buyPrice') {
      setBuyPrice(formattedVal);
    }
    if (name === 'buyAMount') {
      setBuyAMount(formattedVal);
    }
    if (name === 'buy_total') {
      setBuy_total(formattedVal);
    }
  };

  return (
    <div>
      <div>
        <input
          type="number"
          name="buyPrice"
          value={buyPrice}
          onChange={handleBuyChange}
        />
        <input
          type="number"
          name="buyAMount"
          value={buyAMount}
          onChange={handleBuyChange}
        />
        <input
          type="number"
          name="buy_total"
          value={buy_total}
          onChange={handleBuyChange}
        />
      </div>
    </div>
  );
};

补充：如果需要在onChange回调中即时使用最新输入值做处理，直接使用事件对象中拿到的、格式化后的值即可，不需要等待state更新，该值是当前输入的实时结果，不受state异步更新特性影响。

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