reactjs React DnD期望找到有效目标

jpfvwuh4  于 2023-05-06  发布在  React
关注(0)|答案(4)|浏览(136)

看起来React DnD希望可拖动/可丢弃的项目是兄弟项,以便正常工作。如果其中一个项目属于另一个父项,则只要拖动事件触发(交换应该触发时),我就会得到“Expected to find a valid target.”。
我从他们的文档中调整了一个例子,以防有人想尝试一下:破例:https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx
调整在底部。请注意,第一个卡片项与其余的卡片项在另一个div中单独呈现。
为了触发错误,只需将第一个项目拖放到另一个项目中。请注意,如果您拖放任何其他项目,他们将工作。
原始示例:https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx
谢谢大家!

tv6aics1

tv6aics12#

从我遇到的问题来看,悬停处理程序更新表格/网格的速度太快了。它正在设置项目的状态,我猜DnD应用了一个新的目标ID,因此出现了错误。
尝试在trailing选项设置为true的情况下在悬停处理程序上添加去抖动。问题是组件更新得太快,并且DnD所期望的目标ID已经由于状态改变而改变。在那里添加一些检查可能会有所帮助,以确保该项目也是可删除的。

kcugc4gi

kcugc4gi3#

由于@DDT的回答,我设法解决了我遇到的问题。
在useDrop函数中,我在从immutability-helper执行update函数之后更新表格/网格的速度太快。
因此,我添加了一个状态变量,例如。wasDragDropped上面有一个useEffect钩子。我在useDrag完成后更改了wasDragDropped变量,然后通过useEffect钩子中的功能更新了表格/网格。

  • (使用react-dnd 14.0.4和react-dnd-html5-backend 14.0.2)*
5uzkadbs

5uzkadbs4#

我也遇到了这个问题,就像上面的aswers一样,我的问题是组件更新得太快了。我只是在更新状态之前添加setTimout-它的工作(没有useEffect和debounce)。

function moveItems(dragged: string, hovered: string) {
const newWidgets = move(dragged, hovered, widgets); // calculation of positions etc
setTimeout(() => setWidgets(newWidgets), 0);

}

相关问题