NextJS登録後にメッセージを表示する
P粉909476457
P粉909476457 2023-08-17 19:22:20
0
1
423

登録フォームのある NextJS 13 アプリケーションがあります。私が統合している API では、ユーザーはサインアップ後に電子メールを確認する必要があります。私がやりたいのは、登録フォームが成功したら、フォームフィールドを削除し、確認メールをチェックする必要があることを伝えるメッセージを表示することですが、代わりにログインフォームにリダイレクトされます。私は現在 NextJS を学習しているため、使用しているコードはサンプル リポジトリから取得したものです。ログインページにリダイレクトせずにメッセージを表示するように変更することはできますか?

登録ページは次のようになります:

'クライアントを使用' import { useForm } from 'react-hook-form' import { useUserService } から '@/app/_services' エクスポートデフォルト登録 関数 Register() { const userService = useUserService() const { レジスタ、handleSubmit、formState } = useForm() 非同期関数 onSubmit(user) { userService.register(ユーザー)を待ちます } 戻る ( <>
      <フォーム onsubmit="{ハンドルサブミット(onSubmit)}">
       
<ラベル htmlfor="電子メール"> 電子メールアドレス <入力 type="電子メール" { ...登録("メール") }>
<ラベル htmlfor="パスワード"> パスワード <入力 type="パスワード" { ...登録("パスワード") }>
<ボタン 無効="{formState.isSubmitting}"> 登録
) }

実際に登録された関数は useUserService ファイルにあり、詳細は次のとおりです。

register: async (user) => { アラートサービス.clear() 試す { await fetch.post('/api/authentication/register', user); router.push('/login'); } キャッチ (エラー) { アラートサービス.error(エラー); } },
P粉909476457
P粉909476457

全員に返信 (1)
P粉204079743

ログイン ページにリダイレクトせずにメッセージを表示するには、useStateフックを使用して、登録の成功ステータスに基づいて UI を管理します。

  1. useState をインポートする リーリー
  2. 成功した登録ステータスを追加します リーリー
  3. 登録成功ステータスを true に設定します リーリー
  4. 登録が成功した場合は、メッセージを表示します。 リーリー

    );

  5. 登録されたサービスから router.push を削除します リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!