如何在Formik的onSubmit回调中抛出表单错误校验日历日期是否被占用

Formik 的 onSubmit 回调第二个参数内置了setErrorsAPI，专门用于在提交逻辑中手动设置表单错误，你不需要手动修改errors对象，直接调用该方法即可触发Formik的错误状态更新，自动展示对应错误提示。

修正后的实现代码 #

onSubmit={(data, {setSubmitting, resetForm, setErrors}) => {
  let email = `${data.counselor}@gmail.com`;
  getCalendar(email).then(calData => {
    if(calData.data.data) {
      calData.data.data.items.forEach(date => {
        // 已匹配到被占用的起始时间
        if(startTime) {
          // 调用setErrors设置对应字段的错误提示
          setErrors({
            date: "起始日期和时间已被占用，请选择其他时间、日期或时长！"
          })
          // 匹配到冲突后可直接跳出循环，无需继续遍历
          return false
        }
      })
    }
  }).catch(err => {
    // 接口异常场景也可对应设置错误提示
    setErrors({
      date: "日历校验请求失败，请稍后重试"
    })
  }).finally(() => {
    // 无论校验结果如何，最后都要重置提交状态
    setSubmitting(false)
  })
}}

补充说明 #

• setErrors接收一个对象参数，key对应表单字段的name属性，value对应要展示的错误文本，支持同时设置多个字段的错误
• 如果需要先清空之前的历史错误，可以在调用setErrors前先执行setErrors({})
• 异步逻辑结束后必须调用setSubmitting(false)，避免表单一直处于提交中状态，引发提交按钮持续禁用等交互异常

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