MERN项目中react-beautiful-dnd对接后端后无法拖拽及MongoDB索引传递问题

拖拽失效修复 #

• 补全Draggable必填index属性：你当前代码中把index参数注释了，这是react-beautiful-dnd要求的必填项，缺失会直接导致拖拽行为无法被识别。遍历渲染当前列下的元素时，拿到元素在列表内的下标传给index即可。
• 统一数据源：你现在渲染拖拽元素用的是Redux存储的stage数据，但handleDragEnd只修改了本地的state，两个数据源完全不同步，修改后页面不会响应变更，看起来就像拖拽失效。要么统一只用本地state管理，拖拽完成后再调用接口同步给后端、更新Redux；要么直接修改Redux中的stage数据，保证渲染和修改的数据源一致。
• 删除Droppable下多余的嵌套div：你在绑定了provided.innerRef的div外层额外套了一层无属性div，会导致拖拽上下文识别异常，直接去掉这层多余的div即可。
• 后端数据拉取后同步初始化本地state：你现在的useEffect只触发了拉取stage的action，拿到返回的stage数据后没有同步更新到本地state，初始状态下本地state和后端数据不一致也会导致拖拽逻辑异常。

修正后的Draggable渲染参考代码：

// 先过滤当前列的元素再遍历，拿到正确的下标
{stage.filter(stages => stages.status === key).map((stages, index) => (
  <Draggable 
    key={stages._id} 
    index={index} // 补全必填index参数
    draggableId={stages._id} 
    className="drag"
  >
    {(provided, snapshot) => {
      return(
        <div
          className={`item ${snapshot.isDragging && "dragging"}`}
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <button className="stageDetails" style={{padding: "0",border: "none", background: "none"}}>
              {stages.stageName}
         </button>
         <DeleteOutlinedIcon className="delete" />
        </div>
      )
    }}
  </Draggable>
))}

MongoDB对应索引传递方案 #

• 不要直接使用MongoDB的_id作为排序索引，给你的stage集合新增一个order数值类型字段，专门用来存储元素在所属列下的排序优先级。
• handleDragEnd完成本地状态更新后，将调整后的列ID（对应你的status字段）、元素ID、新的排序order值批量传给后端接口，更新数据库中对应元素的status和order字段。
• 后续拉取stage数据时，按status分组、按order字段升序返回，就能和拖拽后的顺序完全对齐。

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