Почему не срабатывает вывод ошибки в react-hook-form?

Question

[ogneog]

Приветствую.

Вот компонент авторизации:

const Auth: FC = () => {

    //useAuthRedirect()

    const {isLoading} = useAuth()
    
    const {login ,register} = userActions()
    const [type, setType] = useState<'login' | 'register'>('login')

    const {register: formRegister, handleSubmit, formState: {errors}, reset} = useForm<IEmailPassword>({
        mode: "onChange"
    })

    const onSubmit:SubmitHandler<IEmailPassword> = (data) => {
        if(type === 'login') {
            login(data)
        }else{
            register(data)
        }
        reset()
    }

    return (
        <>

            <h3>Type: {type}</h3>
            <form onSubmit={handleSubmit(onSubmit)}>

                {isLoading ? <>Loading</> : <></>}

                <Field
                    {...formRegister('email', {
                        required: 'Email is required',
                    })}
                    placeholder='Email'
                    error={errors.email?.message} // Убедитесь, что это правильно устанавливается
                />
                <Field
                    {...formRegister('password', {
                        required: 'Password is required',
                        minLength: {
                            value: 6,
                            message: 'Min length 6 symbols',
                        }
                    })}
                    type='password'
                    placeholder='Password'
                    error={errors.password?.message} // Убедитесь, что это правильно устанавливается
                />

                <Button type="submit">Auth</Button>
                <button type="button" onClick={() => setType(type === 'login' ? 'register' : 'login')}>{type === 'login' ? 'register' : 'login'}</button>
            </form>
        </>
    )
}

Сам Field выглядит так:

const Field = forwardRef<HTMLInputElement, IField>(
    ({placeholder, error, className, type = 'text', style, Icon, ...rest}, ref) => {

        return (
            <div className={cn('', className)} style={style}>
                <label>
                    <span>
                        {Icon && <Icon className='mr-3'/>}

                        {placeholder}
                    </span>
                    <input ref={ref} type={type} {...rest}/>
                </label>
                {error && <div>{error}</div> }
            </div>
        )
    }
)

Почему-то не выводит error. С backend получаю такой ответ:

{"message":"Неверный пароль","error":"Unauthorized","statusCode":401}

Но по каким-то причинам мне выдает undefined при выводе ошибки в console.log

Comments

[szQocks]

А какую ошибку ты хочешь что бы там тебе отображало ? Обрати внимание что react-hook-form - ничего не знает о том что твой запрос вернул ошибку о том что не прошла авторизация, или ещё что-то, эти две логики не как не связаны друг с другом

error отработает если при вводе символов в поле input - длина будет менее 6 как указано в опциях валидации и всё