MERN栈React项目中FormData配合Axios Post请求不生效问题

• 核心问题1：未阻止表单默认提交行为
  你给form标签绑定了onSubmit回调，但回调函数里没有调用e.preventDefault()阻止浏览器原生表单提交逻辑。点击提交按钮时，浏览器会直接触发默认的表单跳转/刷新动作，页面上下文被立即销毁，Axios请求刚发起就被中断，请求的then/catch回调根本没有执行机会，这就是控制台看不到任何报错、请求无响应的最主要原因。
• 问题2：手动设置Content-Type导致请求格式非法
  multipart/form-data格式的请求必须携带自动生成的boundary分隔符，服务端才能正确切割解析不同字段。你手动在headers里写死'Content-Type': 'multipart/form-data'，会覆盖浏览器/Axios自动生成的带boundary的合法请求头，最终服务端收到请求后根本无法解析FormData里的字段内容。
• 问题3：FormData实例初始化位置不规范，存在闭包陷阱
  你把FormData的创建、字段append逻辑写在了组件渲染的顶层作用域，虽然当前代码没有做函数缓存时大概率能拿到当前渲染周期的state值，但这种写法会在每次组件重渲染时都重复创建FormData实例，一旦后续给提交函数加useCallback做性能优化，就会因为闭包拿到旧的state值，提交的永远是过期数据。正确做法是在提交动作触发的瞬间才创建FormData实例，读取最新的state值填充字段。
• 次要问题：数字字段类型不匹配
  年龄输入框是type="number"，但e.target.value拿到的是字符串类型，你直接存入state、append到FormData的是字符串值，如果服务端/MongoDB schema要求age是数字类型，会触发类型校验错误。

import React, { useState } from 'react'
import Axios  from 'axios'
export default function InputData() {
    const [inputName, setInputName] = useState("")
    const [inputAge, setInputAge] = useState(0)
    const [inputEmail, setInputEmail] = useState("")
    const [userImage, setUserImage] = useState("")
    const [info,setInfo] = useState("")

    const createUser = (e) => {
        // 阻止原生表单默认刷新/跳转
        e.preventDefault()

        // 提交时才创建FormData，确保读取到最新的用户输入值
        const bodyFormData = new FormData();
        bodyFormData.append('name', inputName);
        bodyFormData.append('age', inputAge);
        bodyFormData.append("email", inputEmail)
        // 后续如果要传头像，在这里append userImage字段即可

        Axios.post("http://localhost:3008/createUser", bodyFormData)
        .then(function (response) {
            console.log(response);
            setInfo("用户创建成功")
        }).catch(function (error) {
            console.log(error);
            setInfo("提交失败，请查看控制台错误")
        });
    }

  return (
      <div>
          {/* 不需要手动设置encType，提交逻辑由JS控制 */}
          <form onSubmit={createUser}>
              <div>
                  <input type="text" placeholder='enter name' width={400} value={inputName} onChange={(e) => setInputName(e.target.value)} /><br/>
                  {/* 输入数字时主动转成Number类型，避免类型不匹配 */}
                  <input type="number" placeholder='enter age' width={400} value={inputAge} onChange={(e) => setInputAge(Number(e.target.value))} /><br/>
                  <input type="email" placeholder='enter e-mail' width={400} value={inputEmail} onChange={(e) => setInputEmail(e.target.value)} /><br />
                  <button type="submit">Submit</button>
              </div>
          </form>
          <p>{info}</p>
      </div>
  )
}

如果客户端改完之后还是拿不到请求体，检查你的Node.js服务端配置：

• Express框架默认不支持解析multipart/form-data格式的请求体，普通JSON请求能正常处理不代表FormData可以解析，需要额外安装配置multer等FormData解析中间件，否则req.body会是空值。
• 确认服务端CORS配置开放了对应端口的跨域请求权限，不过你之前普通Axios JSON请求能正常运行的话，这一步大概率是正常的。

内容的提问来源于stack exchange，提问作者Martinz Nnaji Jr