reactjs - Formik axios 将数据发布到联系表格 7，空字段

Question

我正在尝试使用 Formik 将数据发送到联系表格 7，但我收到字段为空的错误。你能指导一下它有什么问题吗？如果我从联系表格 7 中删除必填字段，该表格将发送一封包含空白字段的电子邮件。

 import * as React from 'react';
import * as Yup from 'yup';
import axios from 'axios';
import { Formik } from 'formik';

const URL = 'YOUR SITE URL';
const CF7_ID = 'YOUR CONTACT FORM ID';


const formSchema = Yup.object().shape({
  formName: Yup.string().required('Required'),
  formEmail: Yup.string()
    .email('Invalid email')
    .required('Required'),
});

/*
function convertJsontoUrlencoded(obj) {
  let str = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
  }
  return str.join('&');
}
*/
const CF7 = () => {
  const [state, setState] = React.useState(null || '');

  return (
    <>
      <Formik
        initialValues={{
          formSubject: 'Your message',
          formName: 'SAM ',
          formEmail: 'salman@gmail.com',
          formMessage: 'thisisisibdiad iuasdhasiud aidsuahdsiuahsd',
        }}
        validationSchema={formSchema}
        onSubmit={(values, { setSubmitting }) => {
          const submitData = async () => {
            try {
              const result = await axios({
                //body: JSON.stringify(values),
                url: `${URL}/wp-json/contact-form-7/v1/contact-forms/${CF7_ID}/feedback`,
                headers: {
                  //Authorization: `Basic ${TOKEN}`,
                  'content-Type': 'application/json; charset=UTF-8',
                  //'content-type': 'multipart/form-data'
                },
                method: 'POST',
                data: JSON.stringify(values),
              });
              setState(result.data.message);
              setSubmitting(false);
            } catch (error) {
              setState('Something Went Wrong');
            }
          };
          submitData();
        }}
      >
        {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
          <form onSubmit={handleSubmit}>
            <div>
              <label htmlFor="">
                Subject
                <input
                  type="text"
                  name="formSubject"
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.formSubject}
                />
                {errors.formSubject && touched.formSubject ? <div>{errors.formSubject}</div> : null}
              </label>
            </div>
            <div>
              <label htmlFor="">
                Name *
                <input
                  type="text"
                  name="formName"
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.formName}
                />
                {errors.formName && touched.formName ? <div>{errors.formName}</div> : null}
              </label>
            </div>
            <div>
              <label htmlFor="">
                Email *
                <input
                  type="email"
                  name="formEmail"
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.formEmail}
                />
                {errors.formEmail && touched.formEmail ? <div>{errors.formEmail}</div> : null}
              </label>
            </div>
            <div>
              <label htmlFor="">
                Message
                <input
                  type="text"
                  name="formMessage"
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.formMessage}
                />
                {errors.formMessage && touched.formMessage ? <div>{errors.formMessage}</div> : null}
              </label>
            </div>
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>

      {state ? <p>{state}</p> : null}
    </>
  );
};

export default CF7;

错误：进入：“＃”无效字段：[{进入：“span.wpcf7-form-control-wrap.formName”，消息：“该字段是必需的。”，idref：null，...}，...]消息：“一个或多个字段有错误。请检查并重试。” 已发布数据哈希：“”状态：“验证失败”