使用React Beautiful DnD拖拽排序：将顺序保存至数组catid字段

直接在拖拽完成、调整好数组顺序后，遍历整个新数组，为每个元素更新catid为当前索引即可，修改后的代码如下：

function onDragEnd(result) {
    // 复制原数组，避免直接修改状态
    const newItems = [...customgearUpdate];
    // 移除并插入拖拽项，调整顺序
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);
    
    // 遍历数组，为每个元素同步catid为当前索引
    const updatedItems = newItems.map((item, index) => ({
        ...item,
        catid: index
    }));
    
    // 更新状态
    setcustomgearUpdate(updatedItems);
}

说明： #

• 使用map遍历调整顺序后的数组，为每个元素创建新对象（通过展开运算符...item保留原有属性），同时将catid设为当前遍历的索引
• 这种方式确保数组中所有元素的catid都和它们的实际位置索引完全一致，而不只是被拖拽的那一项
• 保持了React状态更新的不可变性原则，避免直接修改原数组元素

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