React中使用Formik：如何终止onSubmit的后续执行逻辑？

核心解决方案：用try/catch包裹API请求 #

你的onSubmit是异步函数，直接用try/catch包裹API调用逻辑是最直观有效的方式。请求失败时会进入catch块，在块内执行return就能直接终止后续代码运行，同时别忘了处理提交状态的重置。

完整代码示例：

const formik = useFormik({
    initialValues: { name: '', number: '' },
    validationSchema: mySchema,
    onSubmit: async (values) => {
        setIsSubmitting(true);

        try {
            // 仅当请求成功时，才会执行后续逻辑
            const details = await axios.get(`${process.env.MY_API}/release/${values.number}`);
            
            // --- 这里写请求成功后的业务逻辑 ---
            console.log('接口返回数据', details);
            // 比如更新状态、跳转页面等
        } catch (error) {
            // 处理请求失败的情况，比如提示用户
            console.error('接口请求失败', error);
            // 直接return终止后续代码执行
            return;
        } finally {
            // 无论成功失败，都要重置提交状态
            setIsSubmitting(false);
        }
    },
});

为什么你之前的方法无效？ #

• 单独使用axios.catch()但未抛出错误：如果只是在catch里处理错误但不抛出，await会把catch的返回值（默认是undefined）赋值给变量，后续代码会继续执行——因为此时Promise已经被catch处理为resolved状态了。
• 直接在catch里return：这种写法不会终止外层async函数的执行，因为axios.get().catch(...)本身是一个resolved的Promise，await会正常拿到结果，代码会继续往下走。

另一种可选写法（链式catch） #

如果偏好axios的链式调用风格，可以在catch里主动抛出错误，让外层try/catch捕获，同样能终止后续逻辑：

const formik = useFormik({
    initialValues: { name: '', number: '' },
    validationSchema: mySchema,
    onSubmit: async (values) => {
        setIsSubmitting(true);

        try {
            const details = await axios.get(`${process.env.MY_API}/release/${values.number}`)
                .catch(err => {
                    // 抛出错误，触发外层catch
                    throw err;
                });
            
            // 请求成功后的逻辑
        } catch (error) {
            console.error('请求失败', error);
            return;
        } finally {
            setIsSubmitting(false);
        }
    },
});

内容的提问来源于stack exchange，提问作者userMod2