react-dnd monitor.getItem() 总是等于悬停的项目

Question

为了制作一个二维可重组列表，我设置了以下示例。

https://codesandbox.io/s/wizardly-cerf-4zpkt?file=/src/DragableItem.js:696-746

然而悬停在组件上方的组件总是悬停的组件。这意味着没有办法移动任何东西，因为它总是会放在自己身上。有办法解决这个问题吗？

要复制，请将 9 个框中的任何一个拖到其他任何框上。

Answer 1

示例codesandbox中有两个错误。

1. hover方法的第一个参数是拖动项，不是悬停项
2. 悬停的项目是调用useDrop的当前项目。换个思路，hovered item调用的是useDrop的hover方法，所以你已经知道hovered item了

这是包含更正的代码和框。 https://codesandbox.io/s/blazing-browser-3h47r?file=/src/DragableItem.js

Answer 2

在悬停方法中添加此 monitor.isOver({ shallow: true }); 代码。

像这样：

hover(item, monitor) {
    monitor.isOver({ shallow: true });
    //your code here
}