Tengo un componente de ticket que contiene algunos datos que deben transferirse a otro lugar en la base de datos.

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

desafortunadamente, el controlador de caída en el componente de destino no se activa cuando dejo caer el elemento en él.

 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 }));

Lo que no entiendo en absoluto es por qué el oyente flotante en useDrop Hook funciona absolutamente bien, pero el oyente no lo hace.

Primero, pensé que algún otro onDrop u onDragOver -Listener (de cuando no usé react-dnd) podría interrumpirlo, pero incluso después de eliminar cada onDragOver y onDrop Listener, el oyente no se dispara.

Nota: Ofc rodeé todo con DndProvider y HTML5Backend . En otra parte de la aplicación, ambos ganchos funcionan como se esperaba. estoy usando react-dnd 16.0.0