在 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 中的非同步表單提交。這種方法可以促進乾淨的程式碼、增強用戶體驗並確保資料完整性。