React Formik onSubmit Async 调用了两次

Question

我正在尝试将异步与 onSubmit 与以下代码用于 React 中的 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}>。

应该是其中之一。