React-dnd拖动带有meteor的mongo中的update db，以便在页面刷新时保持顺序

import React, { Component } from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import { withTracker } from 'meteor/react-meteor-data';
import { Items } from '/imports/api/items';

// 定义拖动源
const itemSource = {
  beginDrag(props) {
    // 将拖动的数据存储在Meteor的Mongo数据库中
    Meteor.call('items.updateOrder', props.item._id, props.item.order);
    return {
      id: props.item._id,
      order: props.item.order,
    };
  },
};

// 定义放置目标
const itemTarget = {
  drop(props, monitor) {
    const draggedItem = monitor.getItem();
    const targetOrder = props.item.order;

    // 更新数据库中的数据以保持顺序
    Meteor.call('items.updateOrder', draggedItem.id, targetOrder);
  },
};

// 定义React组件
class Item extends Component {
  render() {
    const { item, connectDragSource, connectDropTarget } = this.props;

    return connectDragSource(
      connectDropTarget(
        <div>
          {item.name}
        </div>
      )
    );
  }
}

// 连接拖动源和放置目标
const DragSourceDecorator = DragSource('item', itemSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}));

const DropTargetDecorator = DropTarget('item', itemTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
}));

// 使用withTracker连接Meteor数据
const ItemContainer = withTracker(({ itemId }) => {
  Meteor.subscribe('items');
  const item = Items.findOne(itemId);
  return {
    item,
  };
})(Item);

// 导出包装后的组件
export default DragSourceDecorator(DropTargetDecorator(ItemContainer));