React-Beautiful-DND拖拽元素后顺序无法保留问题咨询

核心问题 #

你的代码仅实现了拖拽的视觉交互，但未处理拖拽结束后的数据源更新，组件重新渲染时仍使用原始的inputFields数组，因此拖拽完成后顺序会自动恢复。

具体原因 #

1. DragDropContext缺少onDragEnd回调函数，无法捕获拖拽操作后的位置变更信息
2. 未根据拖拽结果重新排序inputFields数组，数据源未更新，UI自然无法保留新顺序

修复代码示例 #

假设inputFields是组件状态中的数组，修改后的代码如下：

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

// 处理拖拽结束的函数
const handleDragEnd = (result) => {
  // 拖拽被取消时直接返回
  if (!result.destination) return;

  // 复制原数组，避免直接修改状态
  const newInputFields = Array.from(inputFields);
  // 将拖拽元素从原位置移除
  const [draggedItem] = newInputFields.splice(result.source.index, 1);
  // 将元素插入目标位置
  newInputFields.splice(result.destination.index, 0, draggedItem);

  // 更新状态触发组件重新渲染
  setInputFields(newInputFields);
};

return (
  <DragDropContext onDragEnd={handleDragEnd}> {/* 新增拖拽结束回调 */}
    <Droppable droppableId="droppable">
      {(provided) => (
        <div className="droppable" {...provided.droppableProps} ref={provided.innerRef}>
          {inputFields.map((inputField, index) => {
            return (
              {/* 建议用数据自身的唯一ID作为key和draggableId，不要用index */}
              <Draggable key={'item-'+inputField.id} draggableId={'item-'+inputField.id} index={index}>
                {(provided) => (
                  <div className="itineraryflex" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    Item-{index}
                  </div>
                )}
              </Draggable>
            )
          })}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
);

额外注意点 #

• 不要使用数组index作为key和draggableId，数组顺序变化时会导致React diff算法出错，优先使用每个inputField自身的唯一标识（如id字段）
• 必须通过修改状态更新数组，不能直接修改原数组，否则React无法检测到变化并触发重新渲染

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