Компонент не может перехватить ошибку из функции, переданной как prop

#javascript #reactjs #error-handling

#javascript #reactjs #обработка ошибок

Вопрос:

У меня есть компонент формы, и при нажатии кнопки отправки он вызывает:

 //Form.js
    //...
    const submit = () => {
            try {
                onSubmit(values); //onSubmit from props, values from state
            } catch (error) {
                console.log(error);
                setSubmitError(error);
            }
    }
    //...
  

Я пытаюсь использовать его с onSubmit передачей как:

 export const signIn = ({ email, password }) => (
    auth()
    .signInWithEmailAndPassword(email, password)
    .catch(e => { throw e })
);
  

Но он ее не обрабатывает. В текущей версии он выдает ошибку на консоль: auth.esm.js:429 Uncaught The email address is badly formatted. я попытался обернуть ошибку с new Error помощью, но затем она выдает ее в окно. Что я делаю не так?

Ответ №1:

Обычный блок try / catch не может перехватить асинхронные ошибки. Однако вы можете объявить асинхронный блок, и это должно сработать:

 const submit = async () => {
            try {
                await onSubmit(values); //onSubmit from props, values from state
            } catch (error) {
                console.log(error);
                setSubmitError(error);
            }
    }