React订单系统：实现quantity联动更新available_qty与sell_quantity

下面从MongoDB模型定义、Express后端接口、React前端组件三个部分，逐步实现三个字段的同步联动逻辑：

MongoDB Order 模型定义 #

确保你的Order模型包含三个核心数字字段，并设置默认值与最小值约束，避免空值或负数问题：

const mongoose = require('mongoose');

const orderSchema = new mongoose.Schema({
  quantity: {
    type: Number,
    default: 0,
    min: 0
  },
  available_qty: {
    type: Number,
    default: 0,
    min: 0
  },
  sell_quantity: {
    type: Number,
    default: 0,
    min: 0
  },
  // 其他订单相关字段（如用户ID、商品ID等）
});

module.exports = mongoose.model('Order', orderSchema);

Express 后端更新接口 #

通过原子操作保证字段更新的一致性，先计算quantity的变化量，再同步修改另外两个字段：

const express = require('express');
const router = express.Router();
const Order = require('../models/Order');

// 更新订单数量接口
router.put('/orders/:id', async (req, res) => {
  try {
    const { quantity } = req.body;
    const orderId = req.params.id;

    // 查询原订单数据，获取当前quantity值
    const originalOrder = await Order.findById(orderId);
    if (!originalOrder) {
      return res.status(404).json({ message: '订单不存在' });
    }

    // 计算数量变化差值
    const quantityDiff = quantity - originalOrder.quantity;

    // 原子更新：同步修改三个字段，避免并发导致的数据不一致
    const updatedOrder = await Order.findByIdAndUpdate(
      orderId,
      {
        $set: { quantity },
        $inc: {
          sell_quantity: quantityDiff,
          available_qty: -quantityDiff
        }
      },
      { new: true, runValidators: true } // 返回更新后的文档，启用字段校验
    );

    res.json(updatedOrder);
  } catch (error) {
    res.status(500).json({ message: '更新失败', error: error.message });
  }
});

module.exports = router;

React 前端组件实现 #

监听quantity输入变化，先更新本地状态实现即时联动，再调用后端接口保存，接口失败时回滚状态：

import { useState, useEffect } from 'react';
import axios from 'axios';

const OrderEdit = ({ orderId }) => {
  const [order, setOrder] = useState({
    quantity: 0,
    available_qty: 0,
    sell_quantity: 0
  });

  // 初始化加载订单数据
  useEffect(() => {
    const fetchOrder = async () => {
      const res = await axios.get(`/api/orders/${orderId}`);
      setOrder(res.data);
    };
    fetchOrder();
  }, [orderId]);

  // 处理quantity输入变化
  const handleQuantityChange = async (e) => {
    const newQuantity = parseInt(e.target.value) || 0;
    const quantityDiff = newQuantity - order.quantity;

    // 先更新本地状态，实现实时联动效果
    const tempOrder = {
      ...order,
      quantity: newQuantity,
      sell_quantity: order.sell_quantity + quantityDiff,
      available_qty: order.available_qty - quantityDiff
    };
    setOrder(tempOrder);

    // 调用后端接口保存修改
    try {
      await axios.put(`/api/orders/${orderId}`, { quantity: newQuantity });
    } catch (error) {
      // 接口失败时回滚本地状态
      setOrder(order);
      alert('更新失败，请重试');
    }
  };

  return (
    <div className="order-edit">
      <div>
        <label>订单数量：</label>
        <input
          type="number"
          value={order.quantity}
          onChange={handleQuantityChange}
          min="0"
        />
      </div>
      <div>
        <label>已售数量：</label>
        <span>{order.sell_quantity}</span>
      </div>
      <div>
        <label>可用数量：</label>
        <span>{order.available_qty}</span>
      </div>
    </div>
  );
};

export default OrderEdit;

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