Проверьте имя пользователя или телефон уже существует (спереди)

Question

Я хотел бы знать, существует ли пользователь или телефон в моей передней форме,

Я не жду ответа, но что-то говорит мне сделать это.

Я используюYup + Formik для всех моих требований.

На моем бэкэнде с Sequelize мне удалось показать, существует ли имя пользователя или телефон:

passport.use(
    'register',
    new LocalStrategy(
        {
            usernameField: 'username',
            passwordField: 'password',
            passReqToCallback: true,
            session: false,
        },
        (req, username, password, done) => {
            console.log(username);
            console.log(req.body.phone)
            try {
                User.findOne({
                    where: {
                        [Op.or]: [
                            {
                                username,
                            },
                            { phone: req.body.phone },
                        ],
                    },
                }).then(user => {
                    if (user != null) {
                        console.log('username or phone already taken');
                        return done(null, false, {
                            message: 'username or phone already taken',
                        });
                    }
                    bcrypt.hash(password, BCRYPT_SALT_ROUNDS).then(hashedPassword => {
                        User.create({
                            username,
                            password: hashedPassword,
                            phone: req.body.phone,
                        }).then(user => {
                            console.log('user created');
                            return done(null, user);
                        });
                    });
                });
            } catch (err) {
                return done(err);
            }
        },
    ),
);

Но мне трудно понять это на моем фронтеЯ думаю, что могу получить эту информацию в моем axios .catch? :

const onSubmit = async function onSubmit(values) {
        axios({
            method: 'POST',
            url: 'http://localhost:4242/registerUser',
            data: values,
            headers: { 'Content-Type': 'application/json' },
        })
            .then(() => {
                setModalOpen(true);
                setUsername(nameRef.current.value);
                setRedirect(true);
                setCount(4);
            })
            .catch(function (error) {
            });
    };

return (
        <div className="container-all-form">
            <Formik
                initialValues={initialValues}
                validate={validate(getValidationSchema)}
                onSubmit={onSubmit}
            >
// my form

Answer 1

Вы можете сделать это двумя способами. Во-первых, вы можете использовать error.response.message в вашем блоке catch.

Другой способ заключается в том, что вы можете использовать статусы и регистрировать ошибки в своей функции then, как:

.then(res => res.json())
    .then((response) => {
        if (response.status === 200 || response.status === 201) {

            setModalOpen(true);
            setUsername(nameRef.current.value);
            setRedirect(true);
            setCount(4);
        }
        else {
            console.log(response.message)
        }
    }).catch(err => {
        console.log(err.response.message)
    })

Answer 2

В вашем блоке перехвата в функции onSubmit вы сможете получить доступ к сообщению, созданному бэкэндом, если вы выполните:

console.log(error.response.message)

Затем вы можете установить некоторое значение всостояние для условного отображения сообщения об ошибке пользователю, что имя пользователя / телефон существует в вашем бэкэнде. При повторной отправке формы вы можете очистить это состояние, чтобы удалить сообщение об ошибке во время выполнения вызова API.