反应美丽的 DND - “无法找到 ID 为 X 的可拖动对象”

Question

我正在尝试使用react-beautiful-dnd对列表进行拖放排序，但我的元素不可拖动，我得到

Unable to find draggable with id: X

。我已经用文档中的示例交叉检查了我的代码，但无法找到我需要修复的内容。我对

id

和

key

属性使用常量

draggableId

。

代码：CodeSandBox

编辑1：我希望代码能够拖动和重新排列项目，但由于未实现状态更新，因此会返回到其初始位置

Answer 1

刚刚遇到了同样的问题。尝试禁用 React 的严格模式。这为我解决了。 https://reactjs.org/docs/strict-mode.html

这里的react-beautiful-dnd 有一个未解决的问题https://github.com/atlassian/react-beautiful-dnd/issues/2350。希望与严格模式的兼容性能够很快得到修复。在此之前，删除严格模式可以解决该问题。

Answer 2

参加聚会迟到了，但我也面临着同样的问题。原来有一个

react-beautiful-dnd

的叉子叫

@hello-pangea/dnd

。您可以在这里找到它。

这个分叉具有相同的 API，但与

react-beautiful-dnd

不同，它在严格模式下工作 并且 似乎得到了积极维护。

切换很容易，因为它们使用相同的 API。只需添加包即可

npm i @hello-pangea/dnd

或

yarn add @hello-pangea/dnd

然后更改您的导入来源

import {
  Droppable,
  Draggable
} from "react-beautiful-dnd";

到

import {
  Droppable,
  Draggable
} from "@hello-pangea/dnd";

请注意，

@hello-pangea/dnd

是基于打字稿的，这意味着类型也直接包含在这个包中。

Answer 3

我遇到了同样的问题 nextjs

我进入

next.config.js

文件并设置

reactStrictMode to false

Answer 4

技巧是使用字符串 id 而不是数字

 <Draggable
    key={section.id}
    draggableId={section.id.toString()}
    index={index}
 >