React Formik的onSubmit Async被调用两次。

Question

我正在尝试在React中使用Formik的以下代码来结合onSubmit和async：

import React from "react";
import { Formik, Form, Field } from "formik";
import { Row, Col, Button } from "react-bootstrap";

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

  return (
    <>
      <Row className="h-100">
    <Col xs={12} sm={1}></Col>
    <Col xs={12} sm={10} className="align-self-center">
      <div className="block-header px-3 py-2">Add Dataset</div>
      <div className="dashboard-block dashboard-dark">
        <Formik
          initialValues={initialValues}
          onSubmit={async (values, { setSubmitting }) => {
            alert("hi");
            setSubmitting(false);
          }}
        >
          {({ isValid, submitForm, isSubmitting, values }) => {
            return (
              <Form>
                <Field
                  name="name"
                  label="Name"
                  placeholder="Dataset Name"
                />
                <Button
                  type="submit"
                  disabled={!isValid || isSubmitting}
                  className="w-100 btn btn-success"
                  onClick={submitForm}
                >
                  Add Dataset
                </Button>
              </Form>
            );
          }}
        </Formik>
      </div>
    </Col>
    <Col xs={12} sm={1}></Col>
  </Row>
</>
  );
};

export default AddUser;

当我尝试提交时，它会弹出两次“hi”警报。当我不将onSubmit设置为异步时，它就可以正常工作。

我做错了什么或者是否有其他方法来执行异步功能，因为我需要执行RestAPI调用？

- Manoj Sethi

---

抱歉，我无法修复它。在按钮单击时，由于按钮类型为“提交”，我不需要传递submitForm。这是我的低级错误。很抱歉打扰你前来寻求帮助，如果有人遇到类似的问题，希望能对他们有所帮助。 - Manoj Sethi

谢谢，伙计，我也遇到了同样的问题。没错，那是个愚蠢的错误。 - Adam Kosmala

Answer 1

删除 type="submit"，因为已经有一个 onClick={submitForm} 的操作了

<Button
    type="submit"
    disabled={!isValid || isSubmitting}
    className="w-100 btn btn-success"
    onClick={submitForm}
>

- CristianR

Answer 2

请确保不要同时添加以下两个元素：
onClick={formik.formik.handleSubmit}
和
<form onSubmit={formik.handleSubmit}>。
应该选择其中一个。

- Ricardo Setti

Answer 3

我遇到了同样的问题。在我的表单提交处理程序中添加e.preventDefault()对我起作用。

onSubmitHandler = (e) => {
e.preventDefault();
//Handle submission
}

- Nishipal Rana