Javascript 尝试向操作提交formik表单

这可能是一个简单的解决办法，但我还是不知所措，因为我还在学习这个。我构建了一个通常会在状态中执行的操作addTenant，并将其传递给调度一个如下所示的post API调用

export const addTenant = (tenant) => (dispatch) => {
  axios
    .post("/api/Tenant/", tenant)
    .then((res) => {
      dispatch({
        type: ADD_TENANT,
        payload: res.data,
      });
    })
    .catch((err) => console.log(err)); // error log
};

现在我把我的表单改为使用formik，因为我修改了我的模型，这使得它有了一个嵌套的对象，我觉得formik可能会使它更容易。问题是，我似乎无法正确地将值传递给函数以触发addTenant操作，然后intern应在我的reducer中引发AddU TENANT案例，同时在重置表单时将submitting设置为false

下面是有问题的代码。任何帮助都将不胜感激，因为我被难倒了

export class TenantForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      domain_url: "",
      schema_name: "",
      name: "",
      config: [
        {
          date: "",
          tenant_description: "",
        },
      ],
    };
  }

  static propTypes = {
    addTenant: PropTypes.func.isRequired,
  };

  onSubmit = (e) => {
    e.preventDefault();
    const { domain_url, schema_name, name, config } = this.state;
    const show = {
      domain_url,
      schema_name,
      name,
      config,
    };
    this.props.addTenant(tenant);
  };

  render() {
    const {
     domain_url,
     schema_name,
     name,
     config,
    } = this.state;

    const ClientSchema = Yup.object().shape({
      domain_url: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client URL header is required"),
      schema_name: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client db name is required"),
      name: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client name is required"),
    });

    return (
      <div className={s.root}>
        <Formik
          initialValues={{
            domain_url: "",
            schema_name: "",
            name: "",
            config: [
              {
                date: "",
                tenant_description: "",
              },
            ],
          }}
          // validationSchema={ClientSchema} this is breaking submit
          onSubmit={(values, { setSubmitting, resetForm }) => {
            setSubmitting(true);
            values.domain_url = values.domain_url + ".localhost";
            this.addTenant(values);
            resetForm();
            setSubmitting(false);
          }}
        >
          {({
            values,
            errors,
            status,
            touched,
            handleBlur,
            handleChange,
            isSubmitting,
            setFieldValue,
            handleSubmit,
            props,
          }) => (
            <FormGroup>
              <Form onSubmit={handleSubmit}>
                <legend>
                  <strong>Create</strong> Tenant
                </legend>

---

为什么不直接执行这个.props.addTenantvalues；在福米克的内部

onSubmit={(values, { setSubmitting, resetForm }) => {
            setSubmitting(true);
            values.domain_url = values.domain_url + ".localhost";
            this.props.addTenant(values);
            resetForm();
            setSubmitting(false);
          }}

---

为什么不直接执行这个.props.addTenantvalues；在福米克的内部

onSubmit={(values, { setSubmitting, resetForm }) => {
            setSubmitting(true);
            values.domain_url = values.domain_url + ".localhost";
            this.props.addTenant(values);
            resetForm();
            setSubmitting(false);
          }}

使用handleSubmit函数。 这是一个Formik本机函数，可以作为属性传递给表单中的任何子级。 子组件可以执行handleSubmit以触发表单提交

   return (
    <div className='filters-transaction'>
      <Formik>
        {({ values, handleReset, handleSubmit, errors }) => (
          <Form>
            <div className='filters-transaction__filters'>
              <DatePicker
                  onSubmit={handleSubmit}
                />
            </div>
            </Form>
            </Formik>
            </div>

…然后在您的子组件中

return (<button onClick={handleSubmit}>Submit</button>)

使用handleSubmit函数。 这是一个Formik本机函数，可以作为属性传递给表单中的任何子级。 子组件可以执行handleSubmit以触发表单提交

   return (
    <div className='filters-transaction'>
      <Formik>
        {({ values, handleReset, handleSubmit, errors }) => (
          <Form>
            <div className='filters-transaction__filters'>
              <DatePicker
                  onSubmit={handleSubmit}
                />
            </div>
            </Form>
            </Formik>
            </div>

…然后在您的子组件中

return (<button onClick={handleSubmit}>Submit</button>)

---

尝试过之后，案例从未被调用，setSubmitting保持设置为true，不会与函数一起继续。你确定你的道具上有addTenant吗？我无法告诉你我有没有。在函数i have static propTypes={addTenant:propTypes.func.isRequired，}之前，我将this.props.addtenantvalue添加到up中的onSubmit；是否有任何错误抛出？你能展示一下你是如何与addTenant建立连接的吗？等等，别介意我有拼写错误，它正在发送，但我收到了一个400个错误的请求。试过了，这个案例从未被调用过，设置Submitting将保持设置为true，并且不会与功能人员一起继续。你确定你的道具上有addTenant吗？我无法告诉你我是否有。在函数i have static propTypes={addTenant:propTypes.func.isRequired，}之前，我将this.props.addtenantvalue添加到up中的onSubmit；是否有任何错误抛出？你能展示一下你是如何与addTenant建立连接的吗？等等，别介意我有一个拼写错误，它正在发送，但我收到了一个400错误的请求。