React 17.0.1 表单onChange触发时state未正确同步输入值

• React 状态更新的异步快照机制导致日志误判
  React 17 中useState的状态更新是批处理异步执行的：在合成事件的回调逻辑中，调用setXxx后，当前作用域内捕获到的状态变量始终是本次组件渲染时的旧值快照，不会因为刚调用了更新方法就同步变更。
  这种逻辑完全匹配你遇到的输入表现：输入12时回调打印出1，输入123时回调打印出12。本质是打印逻辑拿到了上一次渲染的旧状态快照，并非状态真的没有同步最新输入。
• 状态存储结构存在错误
  你在更新状态时写了[event.target.value]，这个语法会把输入值包裹成单元素数组存入状态，而非存储输入的原始值。哪怕状态更新逻辑完全正常，最终存入表单的值也会是['12']这类数组结构，不符合表单数据的常规预期。
• 表单项缺失name属性绑定
  你的状态更新逻辑依赖event.target.name作为状态对象的key，但渲染时的Form.Control并没有显式设置name属性，这会导致所有输入框的目标name都是空字符串，不同输入项的 value 会互相覆盖同一个状态字段。

1. 修正事件处理逻辑，使用函数式状态更新避免闭包捕获旧值的问题，去掉多余的数组包裹：

const handleCostInputValues = (event, index) => {
    const fieldName = event.target.name
    const inputValue = event.target.value
    // 函数式更新：接收上一次的状态值作为参数，基于旧状态计算新状态，永远能拿到最新的历史值
    setCostsFormValues(prevState => ({
        ...prevState,
        [fieldName]: inputValue // 直接存储输入的原始值，不做数组包裹
    }))
}

2. 给表单项绑定对应的name属性，确保每个输入项匹配正确的状态key：

<Form.Control 
  type="number" 
  name={`cost_${i}`} // 按实际业务场景给每个输入项设置唯一的name
  onChange={e => handleCostInputValues(e, i)} 
/>

3. 调整状态验证方式，避免错误的日志打印时机：
   不要在onChange回调里直接打印旧的状态变量，要验证最新状态可以用useEffect监听状态变化，此时拿到的才是每次重渲染后更新的最新值：

import { useEffect } from 'react'

useEffect(() => {
    // 这里的costsFormValues是每次状态变更后渲染周期内的最新值
    console.log('最新表单状态：', costsFormValues)
}, [costsFormValues])

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