React DND拖拽取消/同列排序时任务卡片消失问题求助

问题1：取消拖拽时卡片消失 #

核心原因 #

拖拽结束时未判断放置是否成功，直接从原列表移除了卡片，但取消拖拽（未放到有效目标区域）时没有将卡片还原到原位置。

修复方案 #

在拖拽结束的处理逻辑中，通过monitor.didDrop()判断是否完成有效放置。若未完成，将卡片插回原列的原索引位置：

// 卡片组件的拖拽结束处理
const handleDragEnd = (item, monitor) => {
  // 判断是否完成有效放置
  if (!monitor.didDrop()) {
    // 从列数据中找到原列
    const sourceCol = columns.find(col => col.id === item.sourceColumnId);
    if (!sourceCol) return;
    
    // 生成新任务列表，将卡片插回原位置
    const updatedTasks = [...sourceCol.tasks];
    updatedTasks.splice(item.sourceIndex, 0, item.task);
    
    // 更新列状态
    setColumns(prevColumns => 
      prevColumns.map(col => 
        col.id === item.sourceColumnId ? {...col, tasks: updatedTasks} : col
      )
    );
    return;
  }

  // 正常放置的后续处理逻辑...
};

关键注意点：拖拽开始时必须记录sourceColumnId（原列ID）和sourceIndex（原位置索引），确保取消拖拽时能精准还原。

问题2：同列内排序时卡片消失 #

核心原因 #

同列排序时，数组更新逻辑错误：移除元素后未正确调整目标索引，导致卡片被移除后无法正确插入到目标位置。

修复方案 #

处理同列排序时，需根据原索引与目标索引的关系调整插入位置（移除元素后数组长度减1，若目标索引大于原索引，需减1）：

// 列组件的放置处理
const handleDrop = (item, monitor) => {
  const sourceColId = item.sourceColumnId;
  const targetColId = column.id;

  // 同列排序逻辑
  if (sourceColId === targetColId) {
    const sourceCol = columns.find(col => col.id === sourceColId);
    if (!sourceCol) return;

    const updatedTasks = [...sourceCol.tasks];
    // 移除拖拽的任务
    const [movedTask] = updatedTasks.splice(item.sourceIndex, 1);
    
    // 调整目标索引：若目标索引大于原索引，需减1（因为已移除一个元素）
    const adjustedTargetIndex = item.targetIndex > item.sourceIndex 
      ? item.targetIndex - 1 
      : item.targetIndex;
    
    // 插入到目标位置
    updatedTasks.splice(adjustedTargetIndex, 0, movedTask);

    // 更新列状态
    setColumns(prevColumns => 
      prevColumns.map(col => 
        col.id === sourceColId ? {...col, tasks: updatedTasks} : col
      )
    );
    return;
  }

  // 不同列移动的逻辑...
};

关键注意点：始终使用不可变方式更新数组（如展开运算符...），确保React能检测到状态变化并重新渲染组件。

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