表单验证时React状态值未更新问题求助

问题描述 #

在React项目中定义了formFieldErrors状态存储表单错误信息：

const [formFieldErrors, setFormFieldErrors] = useState({})

输入框通过onChange调用validateField时，状态能正常更新，错误提示组件FormFieldError可正常显示错误信息。但在表单提交函数submitNewRegistration中，遍历表单元素调用validateField，或直接调用setFormFieldErrors时，formFieldErrors状态均未按预期更新，导致无法在提交前正确校验表单错误。

相关代码片段：

输入框与错误提示组件 #

<input
    type="text"
    name="email"
    id="email"
    autoComplete="email"
    onChange={(e) => {validateField(e.target)}}
    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
<FormFieldError
    Field='email'
    FormFieldErrors={formFieldErrors}
/>

字段校验函数 #

const validateField = (field) => {
switch(field.id) {
    case 'email':
        const pattern = /[a-zA-Z0-9]+[\.]?([a-zA-Z0-9]+)?[\@][a-z]{3,9}[\.][a-z]{2,5}/g
        const result = pattern.test(field.value)
        if (result !== true) {
            setFormFieldErrors({...formFieldErrors, email: 'Please enter a valid email address'})
        } else {
            setFormFieldErrors({...formFieldErrors, email: null})
        }
        break
}
}

提交函数 #

const submitNewRegistration = async (event) => {
    event.preventDefault()

    Array.prototype.forEach.call(event.target.elements, (element) => {
        validateField(element);
    })

    let errors = Object.keys(formFieldErrors).some(key => key !== null)
    console.log(errors)
}

原因分析 #

1. React状态更新的异步性：setFormFieldErrors是异步操作，调用后不会立刻更新formFieldErrors的值。提交函数中调用validateField后立刻访问formFieldErrors，拿到的还是更新前的旧状态。
2. 闭包导致的状态覆盖：validateField中更新状态时使用...formFieldErrors，依赖的是当前渲染周期的状态值。提交时批量调用validateField，所有调用都基于同一个旧的formFieldErrors，后续的更新会覆盖前面的结果，最终状态只保留最后一次校验的结果。
3. onChange正常的原因：onChange是单次触发，每次触发后组件会重新渲染，下一次onChange时formFieldErrors已经是更新后的新值，不会出现批量调用时的闭包覆盖问题。

解决方案 #

方案1：使用函数式更新状态，避免闭包问题 #

修改validateField，利用setFormFieldErrors的函数式更新特性，接收前一次的状态值来生成新状态，确保每次更新都基于最新的状态：

const validateField = (field) => {
  switch(field.id) {
    case 'email':
      const pattern = /[a-zA-Z0-9]+[\.]?([a-zA-Z0-9]+)?[\@][a-z]{3,9}[\.][a-z]{2,5}/g
      const result = pattern.test(field.value)
      // 使用函数式更新，prevErrors为上一次的状态值
      setFormFieldErrors(prevErrors => ({
        ...prevErrors,
        email: result ? null : 'Please enter a valid email address'
      }))
      break
  }
}

若要在提交后判断错误，需通过useEffect监听formFieldErrors的变化，或者改用方案2的一次性校验方式。

方案2：提交时一次性收集所有错误，批量更新状态 #

在提交函数中直接收集所有字段的错误，一次性设置状态，避免异步更新的问题：

const submitNewRegistration = async (event) => {
  event.preventDefault()
  
  const newErrors = {}
  // 遍历表单元素收集错误
  Array.prototype.forEach.call(event.target.elements, (element) => {
    if (element.id === 'email') {
      const pattern = /[a-zA-Z0-9]+[\.]?([a-zA-Z0-9]+)?[\@][a-z]{3,9}[\.][a-z]{2,5}/g
      const result = pattern.test(element.value)
      if (!result) {
        newErrors.email = 'Please enter a valid email address'
      }
    }
    // 添加其他字段的校验逻辑
  })
  
  // 一次性更新错误状态
  setFormFieldErrors(newErrors)
  
  // 直接判断收集到的错误，无需等待状态更新
  const hasErrors = Object.values(newErrors).some(error => error !== undefined)
  if (!hasErrors) {
    // 无错误，执行表单提交逻辑
    console.log('表单校验通过，可提交')
  } else {
    console.log('表单存在错误，无法提交')
  }
}

这种方式更高效，也避免了异步状态更新带来的判断延迟问题。

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