看起来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
谢谢大家!
4条答案
按热度按时间qvtsj1bj1#
可能是react-dnd的问题。
看看这个问题https://github.com/react-dnd/react-dnd/issues/361
tv6aics12#
从我遇到的问题来看,悬停处理程序更新表格/网格的速度太快了。它正在设置项目的状态,我猜DnD应用了一个新的目标ID,因此出现了错误。
尝试在trailing选项设置为true的情况下在悬停处理程序上添加去抖动。问题是组件更新得太快,并且DnD所期望的目标ID已经由于状态改变而改变。在那里添加一些检查可能会有所帮助,以确保该项目也是可删除的。
kcugc4gi3#
由于@DDT的回答,我设法解决了我遇到的问题。
在useDrop函数中,我在从
immutability-helper
执行update
函数之后更新表格/网格的速度太快。因此,我添加了一个状态变量,例如。
wasDragDropped
上面有一个useEffect
钩子。我在useDrag完成后更改了wasDragDropped
变量,然后通过useEffect钩子中的功能更新了表格/网格。5uzkadbs4#
我也遇到了这个问题,就像上面的aswers一样,我的问题是组件更新得太快了。我只是在更新状态之前添加setTimout-它的工作(没有useEffect和debounce)。
}