拖放 - 在某些情况下放下目标棒

Question

我看到的问题是，在某些情况下，当您放下一张卡片时，您不能再将其他卡片放在同一位置，除非您通过拖动不同的项目来移动卡片。

这就像一旦卡片被丢弃，数组就不会拾取重新排序，因此不会正确地注册放置目标。这感觉像是一个 ref/rendering 问题，但我很难找到根本原因。我在拖放功能中有日志，并且拖动功能拾取了拖动但放置功能根本没有触发，这让我相信放置目标卡的引用没有更新？我将包括一个视频和代码。这几乎是直接从 react-dnd docs

任何关于如何调试此类事情的建议也会有所帮助！我很乐意提供任何其他信息。

这里是CodeSandbox重现问题

这是一个video demonstrating the issue

Answer 1

我带着解决方案而来，但不一定是答案。 =\

通过在 Card.jsx 中使用 onDrop 调用中的 collect 函数，我能够使您的演示正常工作。

const [{ canDrop }, drop] = useDrop({
  accept: "card",
  collect: (monitor) => ({
    canDrop: monitor.canDrop()
  }),
  hover: handleDragHover(ref, item, onMove)
});

事实上，您甚至不需要使用 canDrop 变量就可以工作。我不知道为什么这会起作用，除了假设调用该方法是在 redux 存储中进行状态更新，使卡片再次可丢弃……出于某种原因。 :|

希望 ReactDnD 团队的某个人能过来并提供更多背景信息。

拖放 - 在某些情况下放下目标棒

Drag and drop - drop target sticks in some cases

javascript

reactjs

react-dnd