javascript - 组件无法捕获作为 prop 传递的函数中的错误

Question

我有一个 Form 组件，当单击提交按钮时，它会调用:

//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 bad formatted.我尝试用new Error包装错误，但随后它会将其扔到窗口上。我做错了什么？

Answer 1

普通的 try/catch block 无法捕获异步错误。但是，您可以声明一个异步 block ，这应该可以工作:

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