'React formik form onsubmit event callings many times?

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;

I have simple formik form antd button I have used when click submit button post api calling twice and thrice even If I added loading property in button why its happening like this?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source