REACT-FORM-HOOK 类型错误：无法读取未定义的属性“类型”

Question

I'm trying to use a specific string as validation in my form, and I get this error:

TypeError: Cannot read property 'type' of undefined the logic is the admins have a special 'magicword' that they only know and it allows them to register to the system as a simple way to filter out non-admins to register

I'm attaching the error and a sandbox link, thanks in advance!

  49 | <div>
  50 |     <label htmlFor="magicword_field">Your Magic Word</label>
> 51 |     <input type="text" id="magicword_field"
  52 |     ref={
  53 |         register({
  54 |             required: true,

https://codesandbox.io/s/exciting-bogdan-0z1bu?file=/src/App.js

import React from "react";
import axios from 'axios';
import {useForm}  from "react-hook-form";
import './AdminSignup.css'

const AdminSignup = ({ setLoggedUser})  => {

    const { register, handleSubmit , errors , watch} = useForm();

        const onSubmit = (data) => {
            console.log(data)
            axios({
                method:'POST',
                url: 'http://127.0.0.1:5000/signup',
                data: data
            })
            setLoggedUser(true)
            .then(res => console.log(res))
            .catch(err => console.error(err))
    }

    const passWord = watch('password')

    return (
        <div className = "wrap form-page">
            <div className='nes-container with-title'>
            <h2 className='title'>
                Register Admin
            </h2>
            <br/>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div>
                        <label htmlFor="name_field">Your name</label>
                        <input type="text" id="name_field" ref={register({required: '😱 forgot your name, old friend? 😱' })} name='name'/>
                        {errors.name && <p className='formError'>{errors.name.message}</p>}
                    </div>
                    <div>
                        <label htmlFor="email_field">Your email</label>
                        <input type="email" id="email_field" ref={register({ required: '📨 we prefer this over magic scrolls 📨', pattern:  /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/})} name='email'/>
                        {errors.email && <p className='formError'>{errors.email.message}</p>}
                    </div>
                    <div>
                        <label htmlFor="password_field">Your Password</label>
                        <input type="password" id="password_field" ref={register({ required:'👹 no password? are you evena wizard?? 👹'})} name='password'/>
                        {errors.password && <p className='formError'>{errors.password.message}</p>}
                    </div>
                    {
                        passWord &&
                        <div>
                            <label htmlFor="magicword_field">Your Magic Word</label>
                            <input type="text" id="magicword_field"
                            ref={
                                register({
                                    required: true,
                                    validate:  value => value === 'nerd'
                                },
                                )} name='magicword'/>
                            {errors.magicword.type === 'required' && <p className='formError'>
                                {'🔮 time to use it, just like they told you 🔮'}</p>}
                            {errors.magicword.type === 'validate' && <p className='formError'>
                                {'time to stop lying to yourself, buddy!'}</p>}
                        </div>

                    }
                    <br/>
                    <button className='b btn'>Register</button>
                </form>
            </div>
        </div>
    )

}
export default AdminSignup

Answer 1

I think you need to apply some defensive programming step before you access errors.magicword.type . Just use !! check whether errors.magicword.type is undefined or not.

          {(!!errors.magicword.type) && (errors.magicword.type=== "required" && (
            <p className="formError">
              {"🔮 time to use it, just like they told you 🔮"}
            </p>
          ))}