ReactJS中preventDefault()无法阻止表单提交页面重载问题

页面重载和文件上传核心逻辑、fetch请求写法无直接关联，两类独立因素会触发你遇到的刷新问题。 #

1. 表单默认提交行为未被完全阻止 #

你代码里虽然写了e.preventDefault()，但两类写法问题会导致这行代码不生效，触发表单原生提交刷新：

• 事件绑定错误：如果onSubmit写成箭头函数形式时漏传事件对象，比如onSubmit={() => handleSubmit()}，函数内拿不到事件对象自然无法阻止默认行为。如果要用箭头函数绑定，必须显式传入事件参数：onSubmit={(e) => handleSubmit(e)}
• 代码报错中断执行：如果e.preventDefault()执行前的代码抛出错误，会导致这行代码没运行，默认提交行为正常触发。另外表单内的按钮如果没有显式声明type，部分浏览器会默认将表单内按钮识别为提交按钮，可能触发重复提交。

对应修复方式 #

• 把e.preventDefault()放到handleSubmit函数的第一行，确保最先执行
• 给表单内的提交按钮显式添加type="submit"属性
• 给请求逻辑加try/catch错误捕获，避免接口报错时代码中断

2. 开发环境public文件夹监听触发自动刷新 #

这是你当前场景概率最高的原因：
create-react-app 内置的开发服务器会默认监听public文件夹的文件变动，只要该目录下有新增、修改文件，就会自动触发项目重新编译和页面刷新，和你有没有阻止表单默认提交没有关系。

额外提示：无论是否会触发刷新，都不建议把用户上传的动态文件存在public文件夹：

• public目录用于存放站点固定静态资源（比如favicon、固定logo等），项目重新构建部署时，该目录下的内容会被全量覆盖，之前用户上传的文件会全部丢失
• 开发阶段的自动刷新会直接打断调试流程，控制台日志也会随页面刷新被清空

对应修复方式 #

在项目根目录新建独立的upload类目录用于存放用户上传的文件，修改后端multer/formidable的存储路径指向该目录，不要存到public下即可。 #

参考修复代码 #

表单组件代码 #

<form onSubmit={handleSubmit} encType="multipart/form-data">
  <input type="file" id="file" />
  {/* 显式声明按钮类型 */}
  <button type="submit">提交上传</button>
</form>

提交逻辑代码 #

const handleSubmit = async (e) => {
  // 最先执行阻止默认提交
  e.preventDefault();
  try {
    const formData = new FormData();
    const fileInput = document.getElementById('file');
    // 前置判断避免空文件报错
    if (!fileInput.files?.length) {
      alert('请先选择需要上传的文件');
      return;
    }
    formData.append("poster", fileInput.files[0]);
    const res = await fetch("http://localhost:5000/api/post/exhibition", {
      method: "POST",
      body: formData
    })
    const json = await res.json()
    console.log('上传成功返回:', json)
  } catch (err) {
    console.error('上传请求失败:', err)
  }
}

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