React での非同期操作の処理は、迷路をナビゲートしているように感じることがあります。一般的な課題の 1 つは、すべての検証チェックが正常に完了した場合にのみフォームの送信を続行するようにすることです。

この投稿では、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(() => {
  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 での非同期フォーム送信を自信を持って管理できます。このアプローチにより、クリーンなコードが促進され、ユーザー エクスペリエンスが向上し、データの整合性が確保されます。