React中数字输入框onChange首次触发时状态未更新问题

你遇到的问题是因为混用了受控组件和非受控组件的写法：你用useState和onChange试图控制输入框，但又给输入框设置了defaultValue，这会导致首次触发onChange时状态和输入框的DOM值不同步。

修复方案 #

把输入框的defaultValue替换为value={amount}，让输入框完全受控于状态变量：

const [amount, setAmount] = useState(1);

const handleCAmount = (event) => {    
  const value = Number(event.target.value);
  setAmount(value);
};

<input
  className="card__data__amount"
  type="number" 
  min="1" 
  max="9" 
  step="1"
  value={amount}
  onChange={handleCAmount}
/>

原理说明 #

React中，受控组件要求表单元素的value直接绑定到状态变量，每次onChange触发时更新状态，再通过value将状态同步回输入框。如果使用defaultValue，输入框的初始值是DOM层面的默认值，和状态虽然初始值相同，但首次修改时，状态更新后无法通过value同步，就会出现状态未及时更新的错觉（实际状态已经更新，但输入框没有和状态绑定，导致你感知到不一致）。

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