多次响应formik表单onsubmit事件调用？

Question

import { Formik, Form, Field } from "formik";
import { Button } from "antd";

const AddUser = () => {
  const initialValues = {
    name: "",
  };

  return (
    <>
        <Formik
          initialValues={initialValues}
          onSubmit=(values) => {
            alert("hi");//calling mamy times
           Here added api call (post method)
          }}
        >
          {({ isValid, submitForm, isSubmitting, values }) => {
            return (
              <Form>
                <Field
                  name="name"
                  label="Name"
                  placeholder="Dataset Name"
                />
                <Button
                  type="primar"
htmltype="submit"
loading=(props.addingdata) // this is my reducer state intial was false after post call request became true and success state value false
                >
                  Add Dataset
                </Button>
              </Form>
            );
          }}
        </Formik>
      </div>
   
</>
  );
};

export default AddUser;

我有简单的 formik 表单 antd 按钮，当单击提交按钮发布 api 调用两次和三次时，即使我在按钮中添加了加载属性，为什么会发生这样的情况？

Answer 1

确保您阻止默认的表单提交行为，以避免任何意外行为。您可以通过将

onSubmit

事件处理程序添加到

<Form>

组件并调用

event.preventDefault()

来完成此操作。