无法从 Express 中捕获 React 中的错误

Question

我在处理来自客户端的 Express 注册 API 的错误时遇到问题。我正在使用带有上下文的 React 在我的网站中创建一个全局状态。

我像这样在 React 中构建了上下文提供程序：

const AuthContext = React.createContext()

export function useAuth() {
    return useContext(AuthContext)
}

export function AuthProvider({ children }) {
  
    const [currentUser, setCurrentUser] = useState()

    function signup(email, password) {
        if (emailRe.test(email) && passwordRe.test(password)) {
            axios.post('http://localhost:4000/users/create', {
                email: email,
                password: password
            }).then((res) => {
                setCurrentUser(res);
                return res;
            }).catch((error) => {
                return new Error("Can't register")
            });
        };
    }
    const value = {
        currentUser,
        signup
    }

    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )
}

在我的注册页面上，我有以下代码：

function Registration(){

    //some code

    const { signup } = useAuth()
    const onSubmit = async (e) =>{
        e.preventDefault()

        if (password1===password2){
            try {
                let res = await signup(email,password1);
            } catch {
                setEmailError(true) //<- this is where it does not work, I can't catch the error
            }
        }
    }
    return(
       ////
    )
}

这个问题是我无法处理来自注册页面中注册功能的问题。有没有办法保持当前结构或者我必须在注册中移动整个注册功能（但我将无法很容易地更改上下文值）。

Answer 1

尝试改变

return new Error("Can't register")

到

throw new Error("Can't register")

然后像这样捕获错误

try {
  let res = await signup(email, password1);
} catch (error) {
  console.log(error)
  setEmailError(true);
}