サブスク有料会員サイト構築のデータ送信について

2023/02/26 16:47

サブスク有料会員サイト構築で会員登録をする際にデータが正しく送信されない状態です。

実現したいこと

入力した値をDBに送信し保存する。

発生している問題

フロント側でonSubmit,onChangeが呼ばれない。

自分で試したこと

typeにsubmitが指定されているか、from,inputのvalueで使用するものはusestateを使用しているかの確認。

回答 8件

回答するにはログインが必要です

ログイン画面でも同じでございます。
フロントにエラーコードは表示されていません。

email = data['email'].lower()
KeyError: 'email'
[17/Sep/2022 20:18:21] "POST /api/auth/register/ HTTP/1.1" 500 95661

バックエンドにこのようなエラーコードが表示されていますが、恐らくonSubmit,onChangeが呼ばれていないことにより、emailの値が空の状態であるためのエラーだと認識しております。

onSubmitがコールされてないのに、バックエンドに通知が行くのは不思議ですね。

onSubmitがコールされていなければ、バックエンドもコールされないはずです。

console.logを記述してもlogは表示されないので恐らくコールされていないと思います。
onChangeも同様にコールされないのですが何か共通する原因があるのでしょうか。

ログイン画面でも同じ現象でしょうか？

コードは問題ないので、他にエラーなど出てますでしょうか？

検証画面のConsoleに何か表示されてないでしょうか？

こちらになります。
よろしくお願いいたします。

import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useRouter } from 'next/router'
import { register } from '../actions/auth'
import { Oval } from 'react-loader-spinner';
import Head from 'next/head'

const Register = () => {
  const dispatch = useDispatch()
  const router = useRouter()
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
  const loading = useSelector((state) => state.auth.loading)

  const [formData, setFormData] = useState({
    email: '',
    password: '',
  })

  const { email, password } = formData

  const onChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }


  const onSubmit = async (e) => {
    e.preventDefault()

    if (dispatch && dispatch !== null && dispatch !== undefined) {
      await dispatch(register(email, password))
    }
  }

  if (typeof window !== 'undefined' && isAuthenticated) {
    router.push('/')
  }

  return (
    <>
      <Head>
        <title>有料会員サイト | アカウント登録</title>
      </Head>

      <div className="text-center text-2xl mb-5">アカウント登録</div>
      <form className="w-1/3 mx-auto" onSubmit={onSubmit}>
        <div className="mb-4">
          <div className="mb-1" htmlFor="email">
            メールアドレス
          </div>
          <input
            className="input-form"
            type="email"
            name="email"
            placeholder="xxx@xxx.com"
            onChange={onChange}
            value={email}
            required
          />
        </div>
        <div className="mb-4">
          <div className="mb-1" htmlFor="password">
            パスワード
          </div>
          <input
            className="input-form"
            type="password"
            name="password"
            placeholder="半角英数8文字以上"
            onChange={onChange}
            value={password}
            minLength="8"
            required
          />
        </div>

        <div className="flex justify-center">
          <button className="button-yellow" type="submit">
            送信
          </button>
        </div>
      </form>
    </>
  )
}

export default Register

コードは問題ないように思います。

onSubmit関数がコールされないでしょうか？

const onSubmit = async (e) => {
  console.log("onSubmit")

console.logを設定してもう一度ご確認をお願いします。

すみません。
送信ボタンの記述の個所はこちらになります。

        <div className="flex justify-center">
          {loading ? (
            <Oval color="#f59e00" width={50} height={50} />
          ) : (
            <button className="button-yellow" type="submit">
              送信
            </button>
          )}
        </div>