如何解决Axios POST请求无法发送表单数据的问题？

你的代码存在几个关键问题，导致表单数据没有发送到后端：

1. 错误的事件监听逻辑 #

Formik的onSubmit回调本身就是表单提交后的处理函数，你不需要在这个回调里再给表单绑定submit事件监听。第一次点击提交时，这个监听是在提交之后才注册的，所以根本不会触发axios请求，自然看不到数据发送的迹象。

2. 重复且多余的FormData创建 #

你已经通过Formik的values获取了所有表单字段值，并且创建了data对象，但后面又通过new FormData(form)重新生成了一个FormData实例，这不仅重复操作，还可能因为表单控件的name属性不匹配导致数据丢失。

3. 手动设置Content-Type头的问题 #

当使用axios发送FormData时，不需要手动设置Content-Type: multipart/form-data，axios会自动添加正确的请求头（包含boundary分隔符），手动设置反而会导致后端无法正确解析表单数据。

修正后的代码 #

<Formik
  initialValues={{
    firstName: "",
    lastName: "",
    email: "",
    Password: "",
    ConfirmPassword: "",
  }}
  validationSchema={SignupSchema}
  onSubmit={async (values) => {
    console.log("logging click");
    // 直接用Formik的values创建FormData
    const formData = new FormData();
    Object.entries(values).forEach(([key, value]) => {
      formData.append(key, value);
    });

    // 若后端接收JSON格式，可直接发送values，无需转FormData：
    // const res = await axios.post("http://localhost:8080/api/admin/signup", values)

    try {
      const res = await axios.post(
        "http://localhost:8080/api/admin/signup",
        formData
        // 无需手动设置Content-Type头
      );
      console.log(res);
    } catch (err) {
      console.log(err);
    }
  }}
>
  {/* 表单控件需保证name属性与initialValues的键名一致 */}
</Formik>

额外注意事项 #

• 确保表单控件（如input）的name属性值和Formik的initialValues中的键名完全一致，这样Formik才能正确收集数据。
• 可以通过浏览器的网络面板查看请求是否发送、请求参数是否正确，这比仅看控制台日志更直观。

内容的提问来源于stack exchange，提问作者Tyro