我有一个票证组件，其中包含一些应该传输到数据库中另一个位置的数据。

const [{ isDragging }, dragref] = useDrag(() => ({
        type: ItemType.TICKET,
        item: {
            // data that should be transferred
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

不幸的是，当我把项目放到目标组件上时，目标组件中的drop处理程序没有触发。

const [{ isOver, canDrop }, dropref] = useDrop(() => ({
        accept: ItemType.TICKET,
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop(),
        }),
        hover: (item, monitor) => {
             // works fine and prints the correct data
             console.log(item);
             console.log(monitor.canDrop()) // true
        },
        drop: (item) => console.log(item), // <---- doesn't work somehow
    }));

我绝对不明白的是，为什么useDrop钩子中的悬停侦听器工作得很好，而下降侦听器却不行。
首先，我认为一些其他的onDrop或onDragOver-侦听器（从我没有使用react-dnd的时候开始）可能会中断它，但即使删除了每一个onDragOver和onDrop侦听器，侦听器也不会触发。
注意：ofc我用DndProvider和HTML5Backend包围了所有的东西。在应用程序的另一个部分，这两个钩子的工作和预期的一样。我使用的是react-dnd 16.0.0