React+Express+Fetch无法删除数据库数据（404错误）求助

问题核心原因 #

• 前后端路由不匹配：前端请求路径为/demo/users/${userid}，但后端删除路由定义为/demo/userid，路径不一致导致404
• 参数查询逻辑错误：后端试图通过MongoDB原生_id删除数据，但前端传递的是自定义的userid，且路由参数定义错误
• 前端状态更新无错误判断：删除请求失败时仍会更新本地列表，导致数据不一致

具体修复步骤 #

1. 修正后端删除路由与查询逻辑 #

替换原有删除路由，确保路径与前端匹配，并根据自定义userid执行删除：

// 替换原删除路由
server.delete("/demo/users/:userid", async (req, res) => {
  try{
    // 转换参数类型，匹配schema中userid的Number类型
    const idToDelete = Number(req.params.userid);
    // 根据自定义userid查找并删除
    const deletedItem = await UserModel.findOneAndDelete({ userid: idToDelete });
    
    if (!deletedItem) {
      return res.status(404).json({ message: "目标用户不存在" });
    }
    // 改用200状态码，确保前端能接收响应体
    return res.status(200).json({ message:"删除成功!" });
  }catch(error){
    console.error("删除操作出错:", error);
    return res.status(500).json({ message: "删除失败，请重试" });
  }
});

2. 优化前端删除请求的错误处理 #

改用async/await写法，增加响应状态判断，避免错误更新本地状态：

const removeElm = async (userid) => {
  try {
    const response = await fetch(`http://localhost:9090/demo/users/${userid}`, {
      method: "DELETE",
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      const errInfo = await response.json();
      console.error("删除失败:", errInfo.message);
      return;
    }

    const result = await response.json();
    console.log(result.message);
    // 仅在删除成功时更新本地用户列表
    setUsers(values => values.filter(item => item.userid !== userid));
  } catch (err) {
    console.error("请求连接出错:", err);
  }
};

3. 修复前端表单提交的userid赋值问题 #

原代码中setId是异步操作，导致提交的userid为空或旧值，直接生成并赋值：

const handleForm = (e) => {
  const newUserId = Math.random() + 1;
  setId(newUserId);
  setForm({
    userid: newUserId,
    username: fname,
    password: pass
  });
};

额外优化建议 #

• 自定义userid使用Math.random()存在重复风险，建议改用Date.now()或UUID库生成唯一ID
• 前端表单增加输入验证，避免空用户名/密码提交
• 后端CORS配置可指定具体域名，提升安全性

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