サブスク有料会員サイト構築で会員登録をする際にデータが正しく送信されない状態です。
入力した値をDBに送信し保存する。
フロント側でonSubmit,onChangeが呼ばれない。
typeにsubmitが指定されているか、from,inputのvalueで使用するものはusestateを使用しているかの確認。
ログイン画面でも同じでございます。
フロントにエラーコードは表示されていません。
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>
onSubmit関数がコールされないということですが、formタグになっていますでしょうか?
<form className="w-1/3 mx-auto" onSubmit={onSubmit}>
...
<div className="flex justify-center">
{loading ? (
<Loader type="Oval" color="#F59E00" width={50} height={50} />
) : (
<button className="button-yellow" type="submit">
送信
</button>
)}
</form>
該当ファイルのコードを貼り付けて頂いたら、確認します。