React-Bootstrap表单附件上传时event.preventDefault()失效致页面刷新登出的问题求助

首先，页面刷新导致你退出应用的核心原因是：页面刷新会重置React应用的所有内存状态（包括Context中的userId和用户类型），所以解决问题的关键是先阻止页面刷新的发生。

从你的代码来看，你已经在uploadFile开头调用了e.preventDefault()，但页面依然刷新，可能的原因和修复方案如下：

1. 后端返回了重定向响应（最可能的原因） #

如果你的Node.js后端在处理文件上传后，返回了302重定向（比如用res.redirect()），浏览器会自动执行跳转，这种行为是前端的e.preventDefault()无法阻止的。

你可以打开浏览器的「开发者工具-网络面板」，查看uplatt接口的响应：

• 如果状态码是302，并且有Location响应头，那就是后端的问题。
• 修复方案：修改后端代码，让它返回JSON格式的成功响应（比如res.json({successfulAdd: true})），而不是重定向。

2. 冗余的async/then混用导致逻辑混乱 #

你在uploadFile中同时使用了await和.then()，这不仅冗余，还可能导致代码逻辑难以追踪。建议统一使用await写法，让代码更清晰：

const uploadFile = async (e, projectId) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("file", file);
  formData.append("fileName", fileName);
  formData.append("projectId", projectId);
  try {
    const res = await Axios.post("http://localhost:3001/uplatt", formData);
    if (res.data.successfulAdd) {
      window.alert("You have successfully uploaded an attachment!");
      const redirectPath = type === "Staff" 
        ? `/staff/${userId}/viewproject/${projectId}`
        : `/student/${userId}/viewproject/${projectId}`;
      history.push(redirectPath);
    }
  } catch (ex) {
    console.error("上传失败:", ex);
    // 这里可以添加错误提示，比如window.alert("上传失败，请重试")
  }
};

3. 多余的event.preventDefault() #

saveFile函数中的event.preventDefault()是完全多余的——input[type="file"]的onChange事件没有默认行为，去掉它不会有任何影响，反而能减少代码冗余：

const saveFile = (event) => {
  const selectedFile = event.target.files[0];
  setFile(selectedFile);
  setFileName(selectedFile.name);
};

4. 额外检查点 #

• 确认你的Axios没有被全局设置错误的Content-Type：上传FormData时，Axios会自动设置Content-Type: multipart/form-data，如果手动全局设置了其他类型（比如application/json），会导致后端无法解析文件。
• 确认projectId的获取逻辑可靠：你通过window.location.pathname拆分获取projectId的方式容易出错，建议通过路由参数传递（比如用useParams()），这是React Router的标准用法。

按照以上步骤排查和修改，应该就能解决页面刷新和退出的问题了。

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