如何让Formik的onSubmit执行前先触发提交按钮的onClick事件

你现在遇到的执行顺序问题核心有两个原因：

1. 你用了type="submit"的按钮同时绑定了自定义onClick事件和Formik表单，submit事件本身会触发表单提交逻辑，两个事件的执行顺序没有明确保证。
2. 你的login方法是异步函数，onClick触发后不会等待异步登录请求返回，就会继续执行Formik的onSubmit逻辑，此时authenticated还没被赋值为true。另外如果你用的是普通JS变量存储authenticated，就算值更新也不会触发后续逻辑重跑，判断时拿到的还是初始值。

最优解决方案 #

不用拆分登录逻辑和提交逻辑，直接把登录流程放到Formik的onSubmit中即可，Formik会自动在校验通过后才执行onSubmit逻辑，完全符合你的需求：

1. 调整按钮代码，移除自定义onClick

<Button
  color="primary"
  disabled={isSubmitting}
  fullWidth
  size="large"
  type="submit"
  variant="contained"
>
  Sign in
</Button>

2. 重构Formik的onSubmit逻辑，整合登录流程

<Formik
  initialValues={{
    email: '',
    password: ''
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
    password: Yup.string().max(255).required('Password is required')
  })}
  // 给onSubmit加async标记，支持内部异步逻辑
  onSubmit={async (values) => {
    try {
      // 直接在这里执行登录逻辑
      const user = await signInWithEmailAndPassword(
        auth,
        values.email,
        values.password
      );
      console.log('User: ', user);
      // 登录成功直接跳转，不需要额外用authenticated变量判断
      navigate('/app/dashboard', { replace: true });
    } catch (error) {
      console.log('Error: ', error);
      // 可在这里补充登录失败的提示逻辑，比如弹出错误toast
    }
  }}
>

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