Блог

Главная - Вопросы по программированию - Почему мой блок catch не срабатывает, когда я добавляю оператор if?

Почему мой блок catch не срабатывает, когда я добавляю оператор if?

#reactjs #typescript #try-catch

Вопрос:

У меня есть функция onSubmit в моем приложении React/Typescript, которая попадет в мой улов только в том случае, если у меня нет проверки isValid. У меня настроена проверка как на стороне клиента, так и на стороне сервера. В ловушке отображается метод проверки с внутренней стороны. Если значение isValid равно true, форма должна быть отправлена. Если значение isValid равно false, форма не должна быть отправлена, и она должна попасть в мой улов и отобразить ошибки проверки.

Следующий код не улавливается. Он не будет отправлен, потому что он недействителен, но он также не показывает ошибок проверки с серверной части, которые должны быть.

     const onSubmit = async (event: any) => {
        event.preventDefault();
        const isValid = formValidation();
        const baseUrl = getBackendUrl();
       
        try {
            
            if (isValid)
            {
                const token = await getAccessTokenSilently();
            await axios.post(`${baseUrl}/api/enterprises/${enterpriseId}/users`, formData, {
                headers: {
                    Authorization: `Bearer ${token}`,
                }
            })
                .then(res => {
                    setFormData(res.data);
                    close();
                })
            }
            
        }
        catch (error) {
            if (error.response) {
                setErrors(error.response.data.errors);
            }
        }
    };

Если я сделаю это:

 const onSubmit = async (event: any) => {
        event.preventDefault();
        formValidation();
        const baseUrl = getBackendUrl();
        debugger;
        try {
            
                const token = await getAccessTokenSilently();
            await axios.post(`${baseUrl}/api/enterprises/${enterpriseId}/users`, formData, {
                headers: {
                    Authorization: `Bearer ${token}`,
            })
                .then(res => {
                    setFormData(res.data);
                    close();
                })
            }
            
        }
        catch (error) {
            if (error.response) {
                setErrors(error.response.data.errors);
            }
        }
    };

Ошибки в бэкэнде отображаются, но это позволит мне отправить неверную форму.

Комментарии:

1. У вас есть чек на if (error.response) { . Вполне возможно, что будет выдана ошибка, но error.response не определен. Вот почему setErrors(…) не срабатывает.

2. Да, я получаю 400, если у меня нет проверки isValid..если у меня есть проверка isValid, она не попадает в цель.

3. Надеюсь, проблема решена ?

4. @ахмед это так, но не то, что я ожидал. То, как у меня это было изначально, будет работать с isValid… Мне не нужно отображать ответы на стороне сервера пользователю, как я думал. Спасибо, что проверили.

5. Вам необходимо обрабатывать локальные проверки и проверки на стороне сервера отдельно. У вас должны быть дескрипторы для обоих этих обратных вызовов. Я не уверен, какую библиотеку форм вы используете. Они предоставляют точные привязки для redux, если вы хотите изменить состояние ошибок. пожалуйста, проверьте свою документацию по форме.

Метки: ,