React: 登録フォームで登録ボタンを一度押すと、一文字修正するごとにonSubmitが効き続けてしまう。

Question

Reactで、フォームのパスワードと確認用パスワードが違った状態でSubmitボタンを押したあとアラートを表示されているのですが、その後一文字修正するごとに’パスワードが合っていません’とエラーが起こります。useEffectやuseCallbackを追加しても意味がないということは勉強してわかったのですが、一度onSubmitが押されるとonSubmitが効き続けている状態になっているのではないかと疑っています。一体、どこの箇所を修正すればいいでしょうか？

![

RegisterForm.tsx

import React, { useState, FormEvent, useRef } from 'react'
import RegisterImage from '../images/development.svg'
import Button from '../components/Button'
import { useHistory } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { API } from 'aws-amplify'


const startingUser = {
  name: '',
  shop: '',
  email: '',
  password: '',
  passwordConfirm: '',
  tel: ''
}

const RegisterForm: React.FC = () => {

  const [details, setDetails] = useState({ ...startingUser })
  const { signup } = useAuth()
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const history = useHistory()


  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setDetails(prevState => ({
      ...prevState,
      [name]: value
    }))
  }

  const submitHandler = async (e: FormEvent) => {
    e.preventDefault()
    if (details.password !== details.passwordConfirm) {
      return setError(`password doesn't match`)
    }
    try {
      setError('')
      setLoading(true)
      await signup(details.email, details.password)
      await createUser({ ...details })
      history.push('./userPage')
    } catch (e) {

      setError('account failed')
    }
    setLoading(false)
  }

  const clickHandler = () => { history.goBack() }

  async function createUser(user) {
    return API.post('users', '/users', {
      body: user
    })
  }

  return (
    <div>
      <div>
        <div>
          {error && alert(error)}
          <form onSubmit={submitHandler} >
            <div >
              <h2>Sign up</h2>
              <div >
                <label htmlFor='name'>user name</label>
                <input type='text' name='name' required onChange={changeHandler} value={details.name} />
              </div>
              <div>
                <label htmlFor='tel'>tel</label>
                <input type='tel' name='tel' onChange={changeHandler} value={details.tel} />
              </div>
              <div>
                <label htmlFor='email'>email</label>
                <input type='email' name='email' required onChange={changeHandler} value={details.email}
                />
              </div>
              <div>
                <label htmlFor='password'>password</label>
                <input type='password' required name='password'
                  onChange={changeHandler}
                />
              </div>
              <div>
                <label htmlFor='password-confirm'>passwordConfirm</label>
                <input type='password-confirm' name='password-confirm' required
                  onChange={changeHandler}
                />
              </div>
              <div>
                <input type='submit' disabled={loading} value='register'
                />
              </div>
            </div>
          </form>
        </div>
      </div>
      <div>
        <Button color='green' clickHandler={clickHandler}>Go back</Button>
      </div>
    </div>
  )
}

export default RegisterForm

Comments

[hoshi-takanori]

{error && alert(error)} なので、error に値が設定されていれば毎回 alert が実行されますね。
あと、input タグの type に password-confirm なんてありましたっけ？ また、name をそのままキーにしてるので、name='passwordConfirm' とすべきでは。

[607842]

ありがとうございます！errorの値が変更された後に初期化できればいいのか...inputのtyoeでpassword-confirmはありませんでした。失礼いたしました。