react Beautiful DnD–只能拖动可丢弃容器中的最后一个项目

Question

我在React项目中使用Beautiful DnD，遇到了一个错误。只有可丢弃容器中的最后一个项目是可拖动的。当我点击其他项目时，它会给我一个"；无法找到id为"id1"的可拖动对象；警告虽然当我添加一个新项目时，新项目也是可拖动的。

以下是相关的代码段：App.js-可丢弃容器

<DragDropContext onDragEnd={onDragEnd}>
<div className='flex flex-col items-center h-screen'>
<Droppable droppableId='upflow' type={'ACTION'}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className='flex flex-col justify-end flex-1 text-center action-container'
>
{upFlow &&
upFlow.map((actionId) => {
let action = flow.byId[actionId.id];
return (
<Action //..A LOT OF PROPS// />
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
....

Action.js-可拖动项目

<Draggable draggableId={actionId.id} index={indexInRenderOrder}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
className='flex justify-between my-1 overflow-hidden font-bold text-black group'
>
{/* onClick={handleMultiSelect} */}
<div {...provided.dragHandleProps}>
<MdDragHandle
size={30}
className={
isInMultiSelect
? 'bg-blue-200 h-10 mr-1'
: 'h-10 mr-1 bg-white group-hover:bg-blue-200'
}
/>
</div>
//.....more Code//
</div>
)}
</Draggable>

也许你们知道是什么引起的：(

还有：你可以推荐另一个支持多重拖动的DnD库吗？

干杯

Answer 1

我解决了这个问题！对于那些与同样的问题作斗争的人。

在Draggable中，在(provided) => { ... }中，在呈现项目之前添加以下代码行：

if (typeof provided.draggableProps.onTransitionEnd === "function") {
queueMicrotask(() => 
provided.draggableProps.onTransitionEnd?.({
propertyName: "transform"
})
);
} 

我在这里给出了答案(最初，有一个错误(，但为了避免错误，我在这里提出了解决方案

我无法给出一个具体的答案来解释为什么这样做有效。我还没有弄清楚原因。