React窗体onSubmit异步调用两次

Question

我正在尝试使用异步与onSubmit与以下代码的Formik在反应

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;

当我试图提交的时候。它会发出两次“嗨”的警报。当我不使用onSubmit作为异步时，它工作得很好。

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

Answer 1

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

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

Answer 2

请确保不要同时添加两个

onClick={formik.formik.handleSubmit}

和

<form onSubmit={formik.handleSubmit}>。

应该是一个或另一个。