MERN栈创建关联Category的Item时出现400错误求助

问题描述 #

我正在开发一款全栈MERN应用，前端通过props接收categories（用于关联创建新Item的Category模型数据），但使用表单添加新Item时出现400错误。作为MERN栈新手，不确定向服务器发送数据时缺失了哪些内容，推测问题可能出在控制器函数中，却不知道如何在请求中添加关联关系，恳请帮助。

相关代码 #

新增商品的表单组件 #

export default function AddProductForm({addProduct, categories}) {
    const [newProduct, setNewProduct] = useState({
      name: "",
      images: [],
      category: "",
      price: 0,
      description: ""
    });
   
    function handleChange (evt) {
      const { name, value } = evt.target;
      // 处理images字段，将输入的字符串按逗号分割为数组
      if (name === "images") {
        setNewProduct(prev => ({...prev, images: value.split(",").map(img => img.trim())}));
      } else {
        setNewProduct({...newProduct, [name]: value });
      }
    }

    async function handleAddProduct(evt) {
        evt.preventDefault();
        addProduct(newProduct);
        setNewProduct({
            name: "",
            images: [],
            category: "",
            price: 0,
            description: ""
          });
      }
  
    return (
      <>
        <h1>Add New Product</h1>
        <form onSubmit={handleAddProduct}>
        <label>Name</label>
          <input
              name="name"
              type="text"
              value={newProduct.name}
              onChange={handleChange}
              required 
          />
        <label>images（用逗号分隔多个图片链接）</label>
          <input
              name="images"
              type="text"
              value={newProduct.images.join(", ")}
              onChange={handleChange}
              required 
          />
        <label>category</label>
          <select 
              name="category" 
              value={newProduct.category}
              onChange={handleChange}>
            {/* 默认空选项 */}
            <option value="">请选择分类</option>
            {categories.map ((cat, idx) => (
              <option key={idx} value={cat._id}>{cat.name}</option>
            ))}
          </select>
        <label>Price</label>
          <input
              name="price"
              type="number"
              value={newProduct.price}
              onChange={handleChange}
              required 
          />
        <label>Description</label>
          <input
              name="description"
              type="text"
              value={newProduct.description}
              onChange={handleChange}
              required 
          />
          <button type="submit">Add Product</button>
        </form>
      </>
    );
  }

表单所在的页面组件 #

export default function AdminPage({categories}) {
    const [allProducts, setAllProducts] = useState([]);
    const [allOrders, setAllOrders] = useState([]);


    useEffect(function() {
        async function getProducts() {
          const items = await itemsAPI.getAll();
          setAllProducts(items);
        }
        getProducts();

        async function getOrders() {
            const orders = await ordersAPI.getAllActiveOrders();
            setAllOrders(orders)
        }
        getOrders();
      }, []);
  
    async function updateOrder(orderData){
        console.log(orderData)
        const updatedOrder = await ordersAPI.updateOrder(orderData);
        setAllOrders([...allOrders, updatedOrder]);
    }

    async function addProduct(productData) {
        console.log(productData)
        const newProduct = await itemsAPI.createItem(productData);
        setAllProducts([...allProducts, newProduct]);
    }

    async function deleteProduct(itemId) {
        const products = await itemsAPI.removeItem(itemId);
        setAllProducts(products);
        window.location.reload(false);
    }

    return (
        <div className="admin-page">
            <h1>Admin Page</h1>
            <h2>All Available Products </h2>
            <div className="admin-products">
                {allProducts.map((product, idx) => (
                    <div key={idx}>{product.name}<br></br> 
                        <img src={`${product.images[0]}`} alt=""/><br></br> 
                        {/* <button>Edit</button> */}
                        <button onClick={() => deleteProduct(product._id)}>Delete Item</button>
                    </div>
                ))}
            </div>
            <AddProductForm addProduct={addProduct} categories={categories} />
            <h1>ACTIVE ORDERS</h1>
            <div className="orders">
                {allOrders.map((order, idx) => (
                        <div key={idx} className="order-info">
                            Order ID: {order.orderId}<br></br>
                            Ordered on: {new Date(order.updatedAt).toLocaleDateString()}<br></br>
                            Order Total: ${order.orderTotal}
                            {order.shipment.map((info, idx) => (
                                <div key={idx} className="shipment-info">
                                    <h3>Ship to:</h3>
                                    <p>
                                        {info.name}<br></br> 
                                        {info.address}<br></br> 
                                        {info.city},&nbsp;
                                        {info.state}&nbsp;
                                        {info.zip}
                                    </p>
                                </div>
                            ))}
                            <UpdateOrderForm updateOrder={updateOrder}/>
                        </div>
                    ))}
            </div>
        </div>
    );
}

Item模型（要创建的实例） #

const Schema = require('mongoose').Schema;

const itemSchema = new Schema({
    name: { type: String, required: true },
    images: [{ type: String, required: true }],
    category: {type: Schema.Types.ObjectId, ref: 'Category'},
    price: { type: Number, required: true },
    description: { type: String }
  }, {
    timestamps: true
  });
  
  module.exports = itemSchema;

Category模型（被关联的模型） #

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const categorySchema = new Schema({
  name: { type: String, required: true },
  sortOrder: Number
}, {
  timestamps: true
});

module.exports = mongoose.model('Category', categorySchema);

创建Item的控制器函数 #

async function create(req, res) {
  try {
    const item = await Item.create(req.body);
    // 可选：关联查询返回完整分类信息
    await item.populate('category');
    res.json(item);
  } catch (err) {
    // 打印错误详情方便调试
    console.error("创建Item失败:", err);
    res.status(400).json(err);
  }
}

调用接口的API函数 #

export async function createItem(productData) {
  return sendRequest(`${BASE_URL}/new`, 'POST', productData)
}

错误原因与修复说明 #

1. Category关联错误

   • 原代码中下拉选项的value直接绑定了整个category对象，而Item模型中category字段需要的是ObjectId类型，所以要改为cat._id。
   • 初始state中的category不应设为{categories}，改为空字符串即可。

2. Images字段格式错误

   • 原代码中images是数组类型，但表单输入是字符串，需要将输入的字符串按逗号分割为数组，同时在显示时将数组转为逗号分隔的字符串。
   • 对应的handleChange函数需要针对images字段做特殊处理，避免直接赋值字符串导致类型不匹配。

3. 表单重置错误

   • 重置表单时category不应再设为{categories}，改为空字符串，保证下次打开表单时默认无选中状态。

4. 控制器调试优化

   • 在控制器的catch块中打印错误详情，方便快速定位问题（比如字段缺失、类型不匹配等）。
   • 可选添加populate('category')，返回的Item数据会包含完整的分类信息，方便前端展示。

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