在 React 中处理异步操作有时感觉就像在迷宫中行走。一个常见的挑战是确保仅在所有验证检查成功完成后才继续提交表单。

在这篇文章中，我们将深入研究用于管理 React 中的异步表单提交的强大解决方案。我们将把这个过程分解为清晰的步骤，并用代码片段来说明每个阶段。

了解挑战
想象一个具有多个字段的表单，每个字段都需要验证。如果任何字段为空或包含无效数据，您希望阻止表单提交。

解决方案：循序渐进的方法
状态管理：

我们将使用状态变量来管理表单数据、验证错误和提交状态。

const [sessionName, setSessionName] = useState('')
const [startDate, setStartDate] = useState('')
const [endDate, setEndDate] = useState('')
const [errors, setErrors] = useState({})
const [submit, setSubmit] = useState(false)

验证逻辑：
对每个字段实施验证检查。

const onSubmit = (evt) => {
  evt.preventDefault()
  setErrors({})
  setSubmit(true)

  if (!sessionName) {
    setErrors(prev => ({ ...prev, name: 'Session name is required' }))
  }
  if (!startDate) {
    setErrors(prev => ({ ...prev, start_date: 'Start date is required' }))
  }
  // ... more validation checks ...
}

useEffect 进行受控提交：
我们将使用 useEffect 挂钩有条件地执行表单提交逻辑。

useEffect(() => {
  if (Object.keys(errors).length === 0 && submit) {
    // Proceed with form submission (e.g., call addSession())
  } else if (Object.keys(errors).length >= 1 && submit) {
    // Display error message
  }
  setSubmit(false) // Reset submit flag
}, [errors, submit])

条件渲染：
根据错误状态显示错误消息。

重置标志：

确保处理后重置提交标志。

setSubmit(false)

好处：

• 同步：确保仅在验证后提交表单。

• 干净分离：将表单提交逻辑与错误处理分开。

• 改进的用户体验：向用户提供即时反馈。

通过执行这些步骤，您可以自信地管理 React 中的异步表单提交。这种方法可以促进干净的代码、增强用户体验并确保数据完整性。