React-beautiful-dnd - 拖动列时尝试添加或删除 Draggable... 警告

Question

我有一个沙箱，我试图在其中使react-beautiful-dnd 工作。它必须能够水平移动柱子。

但是，我收到以下警告（当尝试拖动列时），如您在控制台中看到的：

You are attempting to add or remove a Draggable [id: Status]
while a drag is occurring. This is only supported for virtual lists.

我想知道这是否与应用程序未找到占位符有关？

阿比奥能发现我做错了什么吗？

Answer 1

我自己偶然发现了这个错误。就我而言，我使用 npm 包uuid来生成draggableId并droppableId直接内联，例如：

\n

import {v4 as uuid4} from "uuid";\n...\n<Droppable droppableId={uuid4()}>\n...\n</Droppable>\n

\n

问题是uuid4()to droppableId(或) 的变量分配在每个渲染\xe2\x80\x94上draggableId被分配不同的值Draggable，注意每当/与\xe2\x80\x94交互时就会发生一个新的渲染，因为每个渲染都在调用并返回一个新的Droppable渲染uuid，当需要更多静态值时，并且不会在运行中更改（即，在发生拖/放操作时不会更改）。uuid4()react-beautiful-dnddraggableIddroppableId

\n

将这些值更改为链接到要移动的对象的静态 ID（例如数据库持久化 ID 或使用useEffect空依赖项数组在每次页面加载时分配一次的 ID，这样任何和所有调用都uuid4只会发生一次）页面加载/安装）。

\n