Javascript Formik验证isSubmitting/isValidating未设置为true

我有一个我的用户要求的表单，我盲目地表明表单是无效的。因此，我计划弹出一个

sweetalert

对话框，让他们知道他们需要重新检查表单。我想我可以在验证中这样做，以便在提交尝试失败时提醒他们：

const validate = values => {
    console.log(formik.isSubmitting); // always prints false
    console.log(formik.isValidating); // always prints false
    const errors = {};
    if (!values.name) {
      errors.name = 'Required';
    }

    if (Object.keys(errors).length > 0 && formik.isSubmitting) {
        Swal.fire({
            icon: 'error',
            title: "Oops. . .",
            text: "There are errors with the form. Please double check your options.",
            footer: "<div>Problems: " + Object.keys(errors).join(', ') + "</div>"
        })
    }

    return errors;
};

const formik = useFormik({
    initialValues: {
        name: item.name
    },
    enableReinitialize: true,
    validate,
    onSubmit: values => {
       // also tried adding 
       formik.setSubmitting(true); 
       //do stuff
    }
})

const validate=values=>{
console.log（formik.isSubmitting）；//始终打印false
console.log（formik.isValidating）；//始终打印false
常量错误={}；
如果（！values.name）{
errors.name='Required'；
}
if（Object.keys（errors）.length>0&&formik.isSubmitting）{
喷火({
图标：“错误”，
标题：“哎呀……”，
文本：“表单有错误。请仔细检查您的选项。”，
页脚：“问题：“+Object.keys（错误）.join（'，'）+”
})
}
返回错误；
};
常数formik=useFormik({
初始值：{
名称：item.name
},
enableReinitialize:true，
验证
onSubmit:values=>{
//还尝试添加
formik.setSubmitting（真）；
//做事
}
})

但是

问题提交/isValidating

总是错误的。我是否需要向

验证

功能传递额外的道具才能访问这些值

---

我认为

验证

方法不是向用户显示对话框的好地方。 您的用例看起来像是一个定制需求，而formik lib。共享他们在内部为表单提交所做的工作-

您可以为提交添加自定义方法

所以， 我已经把你的沙箱翻了个底朝天

让我知道你的想法

编辑：添加代码，这样即使链接过期，您仍然可以知道该怎么做

import React, { useState } from "react";
import "./styles.css";
import { useFormik } from "formik";
import Swal from "sweetalert2";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [item, setItem] = useState({
    name: "",
    email: ""
  });

  const validate = (values) => {
    console.log("values: ", values);
    const errors = {};
    if (!values.name) {
      errors.name = "Required";
    }
    return errors;
  };

  const initialValues = {
    name: item.name,
    email: item.email
  };

  const formik = useFormik({
    initialValues,
    enableReinitialize: true,
    validate,
    onSubmit: (values) => {
      console.log("inside onSubmit", values);
    }
  });

  const customSubmitHandler = (event) => {
    event.preventDefault();
    const touched = Object.keys(initialValues).reduce((result, item) => {
      result[item] = true;
      return result;
    }, {});
    // Touch all fields without running validations
    formik.setTouched(touched, false);
    formik.setSubmitting(true);

    formik
      .validateForm()
      .then((formErrors) => {
        if (Object.keys(formErrors).length > 0) {
          Swal.fire({
            icon: "success",
            title: "Yes. . .",
            text: "This one should fire if everything is working right",
            footer:
              "<div>Problems: " + Object.keys(formErrors).join(", ") + "</div>"
          });
        } else {
          formik.handleSubmit(event);
        }
        formik.setSubmitting(false);
      })
      .catch((err) => {
        formik.setSubmitting(false);
      });
  };

  return (
    <form id="campaignForm" onSubmit={customSubmitHandler}>
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input
          id="name"
          type="text"
          onChange={formik.handleChange}
          value={formik.values.name}
          className="form-control"
          placeholder="Enter name"
        />
        {formik.errors.name ? (
          <div className="text-danger">{formik.errors.name}</div>
        ) : null}
      </div>
      <div className="form-group">
        <label htmlFor="name">Email</label>
        <input
          id="name"
          type="email"
          onChange={formik.handleChange}
          value={formik.values.email}
          className="form-control"
          placeholder="Enter email"
        />
        {formik.errors.email ? (
          <div className="text-danger">{formik.errors.email}</div>
        ) : null}
      </div>
      <div className="form-group">
        <button className="btn btn-info" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
从“formik”导入{useFormik}；
从“sweetalert2”导入Swal；
导入“bootstrap/dist/css/bootstrap.min.css”；
导出默认函数App（）{
const[item，setItem]=useState({
姓名：“，
电子邮件：“
});
常量验证=（值）=>{
日志（“值：”，值）；
常量错误={}；
如果（！values.name）{
errors.name=“必需”；
}
返回错误；
};
常量初始值={
名称：item.name，
电子邮件：item.email
};
常数formik=useFormik({
初始值，
enableReinitialize:true，
验证
onSubmit：（值）=>{
log（“内部onSubmit”，值）；
}
});
常量customSubmitHandler=（事件）=>{
event.preventDefault（）；
const toucted=Object.keys（初始值）。reduce（（结果，项目）=>{
结果[项目]=真；
返回结果；
}, {});
//触摸所有字段而不运行验证
formik.settouch（touch，false）；
formik.setSubmitting（真）；
福米克
.validateForm（）
.然后（（formErrors）=>{
if（Object.keys（formErrors）.length>0）{
喷火({
图标：“成功”，
标题：“是……”，
文字：“如果一切正常，这个应该开火”，
页脚：
问题：“+Object.keys（formErrors.join”（“，”）+”
});
}否则{
formik.handleSubmit（事件）；
}
formik.setSubmitting（假）；
})
.catch（（错误）=>{
formik.setSubmitting（假）；
});
};
返回(
名称
{formik.errors.name(
{formik.errors.name}
)：null}
电子邮件
{formik.errors.email(
{formik.errors.email}
)：null}
提交
);
}

如果你能在代码沙箱或类似的地方重现这个问题，我保证我们能够解决它。添加更多上下文：我遵循了formik内部对表单提交所做的操作，除了在启动formik的

onSubmit

方法之前添加了自定义逻辑（以显示对话框）。您会注意到，当表单没有错误时，

onSubmit

中的逻辑在使用

formik

Agreed时按预期运行…从“单一责任主体”的角度来看…验证器验证。“反应”取决于类别消费者