客户端提交产品数据至MongoDB无报错但未入库问题求助

尝试从客户端向服务器提交产品数据，无法存入MongoDB，且无任何报错信息；用户表可正常提交数据，但产品表数据无法入库。以下是相关代码：

前端提交代码 #

const saveData = async () => {
    try {
      const response = await fetch("/api/prods");
      const json = await response.json();
      if (response.ok) {
        const addUser = await fetch("/api/prods", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            pname: Name,
            date: new Date().toLocaleString(),
            desc: Desc,
            price: Price,
            ratings: 0,
            image: Image,
            bannner: Banner,
            category: Category,
          }),
        });
      }
    } catch (err) {
      console.error(err);
      alert(err.message);
    }
};

package.json代理配置 #

"proxy": "http://localhost:5000"

输入组件代码 #

<input
        type="text"
        placeholder="Name"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="Price"
        onChange={(e) => setPrice(e.target.value)}
      />
      <input
        type="text"
        placeholder="Desc"
        onChange={(e) => setDesc(e.target.value)}
      />
      <input
        type="text"
        placeholder="Category"
        onChange={(e) => setCategory(e.target.value)}
      />
      <FileBase64
        multiple={false}
        onDone={({ base64 }) => setImage(base64)}
      />
      <FileBase64
        multiple={false}
        onDone={({ base64 }) => setBanner(base64)}
      />
    </div>
    <button onClick={() => saveData()}>Submit</button>

Mongoose Prod模型 #

const prodScheme = mongoose.Schema(
  {
    pname: {
      type: String,
      required: true,
    },
    date: {
      type: String,
      required: true,
    },
    desc: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
    ratings: {
      type: Number,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    bannner: {
      type: String,
      required: true,
    },
    category: {
      type: String,
      required: true,
    },
  },
  {
    timestamps: true,
  }
);

module.exports = mongoose.model("Prod", prodScheme);

产品控制器postProds函数 #

const asyncHandler = require("express-async-handler");
const Prod = require("../model/prodsModel");

const postProds = asyncHandler(async (req, res) => {
  if (!req.body.pname) {
    res.status(400);
    throw new Error("Please enter a name");
  }

  const Prod = await Prod.create({
    pname: req.body.pname,
    date: req.body.date,
    desc: req.body.desc,
    price: req.body.price,
    ratings: req.body.ratings,
    image: req.body.image,
    bannner: req.body.bannner,
    category: req.body.category,
  });

  res.json(Prod);
});

module.exports = {
getProds,
      postProds,
      updateProds,
      delProds,
};

排查关键点 #

1. 前端POST请求未处理响应错误
   fetch仅在网络错误时触发catch，HTTP错误码不会进入捕获逻辑。当前POST请求后未检查响应状态，即使接口返回错误也无法感知。需添加响应校验：

   const addUser = await fetch("/api/prods", { ... });
   if (!addUser.ok) throw new Error(`请求失败，状态码：${addUser.status}`);
   const result = await addUser.json();
   

2. 控制器变量名冲突
   控制器中用const Prod = await Prod.create(...)覆盖了导入的模型Prod，导致逻辑异常。需修改变量名：

   const newProd = await Prod.create({ ... });
   res.json(newProd);
   

3. 数据类型不匹配
   前端输入的price是字符串（number类型input的value仍为字符串），但模型定义为Number类型。需在前端或控制器转换：

   • 前端转换：price: Number(Price)
   • 控制器转换：price: Number(req.body.price)

4. 必填字段校验不完整
   控制器仅校验了pname，但模型所有字段均为必填。若某字段缺失或为空，Mongoose默认会静默失败。需完善控制器校验，或开启Mongoose调试日志查看细节：
   在数据库连接代码中添加mongoose.set('debug', true)，查看数据插入的详细日志。

5. 前置GET请求可能阻塞逻辑
   前端先发送GET请求/api/prods，若该请求失败（如后端GET路由未配置），后续POST请求不会执行。可去掉不必要的前置GET请求，或确保GET接口正常可用。

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