使用react-table实现行拖拽时Droppable未找到且result.destination为空

报错原因及对应解决方法 #

这个是react-beautiful-dnd结合表格组件使用时的常见问题，触发原因主要有以下几种：

• 缺少Droppable强制要求的placeholder渲染：你目前贴的代码中，TableBody内部渲染完所有Draggable行之后，没有渲染provided.placeholder，这个元素是拖拽库用来计算容器位置、预留拖拽占位空间的核心元素，缺失会导致库识别不到对应id的droppable容器，拖拽结束后自然也拿不到destination信息。只需要在inventory.map逻辑结束后、TableBody闭合前补上{provided.placeholder}即可。
• droppableId全局重复：如果页面内存在多个Droppable组件，且都用了droppable作为id，会导致id冲突触发该报错，改成唯一值即可。
• TableBody组件未正确转发ref：如果你用的TableBody是自定义封装的组件，没有通过React.forwardRef把绑定的provided.innerRef转发到真实的DOM节点上，拖拽库拿不到真实的容器元素，也会识别不到droppable入口。可以检查ref绑定的节点是否是页面真实渲染的tbody元素，自定义组件补全ref转发逻辑即可。
• Draggable的index值和实际渲染顺序不一致：如果渲染前对inventory数组做了过滤、排序等操作，但index还是用了原数组的下标，会导致拖拽上下文的顺序错乱，也会出现destination为null的问题，需要保证index和实际渲染的行顺序完全对应。

修正后的代码参考 #

<DragDropContext onDragEnd={onDragEnd} onDragUpdate={onDragUpdate}>
  <Droppable droppableId="droppable">
    {(provided) => (
      <TableBody {...provided.droppableProps} ref={provided.innerRef}>
        {inventory.map((row, index) => (
          <Draggable key={row.accountId} draggableId={row.accountId.toString()} index={index}>
            {(provided, snapshot) => (
              <TableRow 
                ref={provided.innerRef} 
                {...provided.draggableProps}
                style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
              >
                {/* 原有单元格渲染逻辑 */}
              </TableRow>
            )}
          </Draggable>
        ))}
        {/* 新增placeholder渲染 */}
        {provided.placeholder}
      </TableBody>
    )}
  </Droppable>
</DragDropContext>

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