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

Question

我正在尝试使用react-beautiful-dnd对列表进行拖放排序，但我的元素不可拖动，我得到了Unable to find draggable with id: X。我已经用文档中的示例交叉检查了我的代码，但无法找到我需要修复的内容。我使用id常量key和draggableIdprop。

代码： 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是基于打字稿的，这意味着类型也直接包含在这个包中。