React+MongoDB新增Schema时Axios请求404错误求助

问题修复方案 #

1. 后端服务器未监听端口（404核心原因）

你提供的index.js缺少服务器启动监听的代码，导致/addclass接口无法被访问。在index.js末尾添加端口监听逻辑：

app.listen(3001, () => {
  console.log('服务器运行在端口3001');
});

2. 模型导入路径错误

模型文件名为model-classes.js，但导入时路径写的是../models/Classes，文件名不匹配会导致模型加载失败，修改导入语句：

const FormData2Model = require('../models/model-classes');

3. 接口逻辑与Schema不匹配

ClassesSchema仅包含classname字段，但接口里却在查询email，这会导致查询永远返回空，且逻辑不符合需求。改为检查班级名称是否重复：

app.post('/addclass', (req, res) => {
  const { classname } = req.body;
  FormData2Model.findOne({ classname })
    .then(existingClass => {
      if (existingClass) {
        res.json("该班级名称已存在");
      } else {
        FormData2Model.create(req.body)
          .then(newClass => res.json(newClass))
          .catch(err => res.json(err));
      }
    })
    .catch(err => res.json(err)); // 新增全局错误捕获，避免未处理的Promise异常
});

4. 前端状态与错误提示优化

• 初始化useState为空字符串，避免提交时出现undefined：

  const [classname, setClassname] = useState('');
  

• 修复catch中的alert逻辑，确保仅在报错时触发：

  .catch(err => {
    console.log(err);
    alert("添加班级失败，请检查服务器连接");
  });
  

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