React beautiful 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>