React useState循环更新仅生效最后属性，表单校验状态赋值异常

问题根源 #

React的useState更新是异步且批量执行的，在循环中多次调用setInpValues时，每次更新都会基于当前闭包中的初始状态，而非前一次更新后的状态。这就导致前面的更新被后面的覆盖，最终只有最后一次更新生效。

解决方案 #

不要在循环内逐个调用setInpValues，而是先构建好完整的状态更新对象，再一次性执行状态更新：

• 基于当前状态（或prevState）创建临时对象，存储所有需要更新的字段错误信息
• 遍历服务器返回的responseError，匹配formFields中的对应字段，将错误信息写入临时对象
• 最后调用一次setInpValues，传入临时对象完成批量更新

代码示例 #

错误写法（仅最后一个字段更新生效）

// 错误示例：循环内多次调用setState
Object.keys(responseError).forEach(errorKey => {
  Object.keys(formFields).forEach(fieldKey => {
    if (fieldKey === errorKey) {
      setInpValues(prev => ({
        ...prev,
        [fieldKey]: {
          ...prev[fieldKey],
          error: responseError[errorKey]
        }
      }))
    }
  })
})

正确写法（批量更新所有字段错误）

// 正确示例：先构建完整更新对象，再一次性更新
setInpValues(prev => {
  const updatedValues = { ...prev }
  // 遍历服务器错误，匹配字段并更新错误信息
  Object.keys(responseError).forEach(errorKey => {
    if (formFields[errorKey]) { // 确认字段存在于formFields中
      updatedValues[errorKey] = {
        ...updatedValues[errorKey],
        error: responseError[errorKey]
      }
    }
  })
  return updatedValues
})

补充说明 #

• 使用setInpValues的函数式更新（传入接收prevState的回调），确保每次更新都基于最新的状态快照
• 通过一次性构建完整的更新对象，避免了异步批量更新导致的状态覆盖问题

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