Formik - 当提交验证失败时如何显示附加错误消息

Question

如果提交时验证失败，我需要显示附加错误消息。如果更改/模糊时验证失败，则不应显示此错误消息。看起来没有办法判断提交时是否发生验证错误，因为验证函数是在更改、模糊和提交时调用的。可以禁用更改/模糊时发生的验证，以便我知道提交时发生的错误，但我也需要在更改和模糊时进行验证。

这是我所做的：

<Formik
  validate={values => {
    const errors = {};

    if(!values.reason){
      errors.reason = 'This is required';
    }
    return errors;
  }}
>
  {{errors, status, setStatus, validateForm} => (
    <Form>
      {status && <div>There was a problem submitting the form</div>}
      <Field type="text" name="reason"/>
      <ErrorMessage name="reason" />
      <button type"submit" onClick={() => {
        validateForm().then(errors => {
          if(Object.keys(errors).length > 0){
            setStatus('error');
          }
        });
      }}>
        Submit
      </button>
    </Form>
  )}  
</Formik>

这是可行的，但是当单击提交按钮时，验证函数会运行两次。有一个更好的方法吗？