React前端提交新数据后MongoDB未正常更新的问题排查

在React前端提交表单新增数据时，表单可正常提交，主页面也能显示新数据，但MongoDB数据库中文档总数显示已更新，却无法展示全部数据，界面结果保持不变，怀疑是否是大小限制导致？

相关代码 #

CreateCategory.jsx #

const handleCreate = async(e) => {
      e.preventDefault()
      try{
        const categoryData = new FormData()
        categoryData.append("name", name)
        categoryData.append("photo", photo)

        const { data } = await axios.post("http://localhost:4000/api/category", categoryData)
        if(data.success){
          toast.success("Product created successfully")
          navigate("/categories")
        }
      } catch(error){
          console.log(error)
          toast.error("Something went wrong")
      }
  }

controllers/category.js #

export const createCategory = async(req,res) => {
    try{
        const { name } = req.fields
        const { photo } = req.files  

        if (!name) {
            return res.status(401).send({ message: "Name is required" });
        }

        const existingCategory = await categoryModel.findOne({ name })
        if(existingCategory){
            return res.send({
                success: false,
                message: "Category already exists" 
            })
        }

        const category = await new categoryModel({
            name,
            slug: slugify(name)
        })
        if(photo){
            category.photo.data = fs.readFileSync(photo.path)
            category.photo.contentType = photo.type
        }
        await category.save()

        res.status(201).send({
            success: true,
            message: "New category created",
            category
        })
    } catch(error){
        console.log(error)
        res.status(500).send({
            success: false,
            error, 
            message: "Error in adding category"
        })
    }
}

server.js #

import express from 'express'
import mongoose from 'mongoose'
import cookieParser from 'cookie-parser'
import dotenv from 'dotenv'
import cors from 'cors'
import authRoutes from "./routes/authRoutes.js"
import categoryRoutes from "./routes/categoryRoutes.js"
import productRoutes from "./routes/productRoutes.js"

dotenv.config()


const app = express()

app.use(cors())
app.use(express.json())

app.use(express.urlencoded({ extended: true }))

app.use(cookieParser())

const port = 4000 || process.env.PORT

const connectDB = async () => {
    try {
        //ecommerce-store
        const conn = await mongoose.connect(process.env.MONGO_URI); 
        console.log(`MongoDB Connected: ${conn.connection.host}`);
    } catch (error) {
        console.error(`Error: ${error.message}`);
        process.exit(1);
    }
};

app.use("/api/auth", authRoutes)
app.use("/api/category", categoryRoutes)
app.use("/api/product", productRoutes)

app.listen(port, () => {
    connectDB()
    console.log(`Server running on port ${port}`)
})

数据库截图 #

排查方向 #

• Compass默认显示限制：MongoDB Compass默认仅加载前100条文档，可点击界面「加载更多」按钮，或调整查询条件查看全量数据。
• 二进制数据影响：代码中存储了图片二进制数据，若图片体积超过MongoDB单文档16MB限制，保存时会抛出错误，但你前端能正常提交显示，此可能性较低。
• 查询逻辑问题：检查前端/后端获取分类列表的接口，是否存在分页、过滤条件错误，导致仅返回部分数据。
• 缓存或连接问题：重启MongoDB、后端服务，刷新Compass，确认数据是否真的未写入（文档总数更新可能是缓存显示）。

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