反应美丽的 DND：检测到非连续 <Draggable /> 索引 - 重新排序时出错

Question

使用 https://www.npmjs.com/package/react-beautiful-dnd 首次对某些元素重新排序后，无法对之前移动的项目进行重新排序，并且控制台会打印

 Unable to find draggable with id: XXX

此外，当拖动另一个项目时，UI 会损坏并且控制台会打印：

Detected non-consecutive <Draggable /> indexes.(This can cause unexpected bugs) 0, [🔥2], 3, 4, 5

Answer 1

解决方案

您必须将

key

属性添加到

<Draggable key={uniqueId} ...>

组件。

另外，请注意：

• 您不能使用数组

  index

  作为

  key

  属性的值
• 键值应该是代表元素的唯一ID和稳定值（在重新渲染时不会改变）

破损

    <Draggable draggableId={id} index={index}>
                {(provided) => (
                   ...
                )}
    </Draggable>

已修复

<Draggable key={uniqueId} draggableId={uniqueId} index={index}>
            {(provided) => (
                     ...
            )}
 </Draggable>

Answer 2

由于状态逻辑中的错误，我遇到了同样的错误，其中两个可拖动对象（在不同的可放置对象中）具有相同的可拖动对象 ID。