javascript - 为什么我的拖放项目会卡住？

Question

我正在学习 React Hooks，边做边学，效果最好。

我认为我做了一些有趣的事情，并找到了一个关于如何使用 React 实现拖放的在线教程。 这是通过类组件完成的，因此我通过更改它并使用钩子(Hook)来挑战自己。

我追求的是:

左侧就像一张 table 和椅子。每个绿色区域都是一把椅子，我们可以将元素扔到上面。

右侧:就像一袋元素，可以放置在自己的“椅子”上。就像用户将其放在椅子上之前的临时位置

问题:

我可以毫无问题地将项目从左侧拖动到右侧，但是当从右侧拖动到左侧时，该项目会掉落在左侧，但也会保留在右侧。

我认为我必须在任何地方使用相同的数据集，以便所有子组件都从父组件继承数据，并且当通过 setDragables 在一个组件中更新数据时，我认为所有内容都会更新，但它事实并非如此...

它有很多代码，所以我创建了这个 sandbox .

感谢您的任何想法!

Answer 1

我很难浏览你的代码，因为那里有很多代码。

看来主要问题是，当您从左到右移动时，它不会重新渲染，但从右到左移动时，它会正确地重新渲染。 当您进行多次拖放操作时，右侧列表将更新为具有上一次拖放应具有的正确值。 因此，进一步研究为什么它不重新渲染将是有益的。

我确实想出了一个解决方案来修复您的代码沙箱代码，尽管这绝对不是最优雅的方法，并且还有许多其他方法可以解决此问题。 我决定解决此问题的方法是在使用 useEffect Hook 更新 Dragables 时更新状态。然后我为未分配的人创建了状态。

代码沙箱链接在这里https://codesandbox.io/s/react-hooks-usestate-35chk?fontsize=14&hidenavigation=1&theme=dark

我所做的唯一更改是对 MyFuncApp 函数，并且我认为我将“Go To Gym”项目的 DropslotNumber 更改为 0，而不是像您最初那样将其插入未分配的数组中。

  const initial = Dragables.filter(i => {
    return i.DropSlotId === 0;
  });
  const [unassigned, setUnassigned] = useState(initial);
  const onDragEnd = (event, newPos, data) => {
    setUnassigned(curr => curr.filter(item => item.CId !== data));
    //post
  };
  useEffect(() => {
    setUnassigned(
      Dragables.filter(i => {
        return i.DropSlotId === 0;
      })
    );
  }, [Dragables]);

上面的代码片段是主要的更改。通过过滤放置槽 0 中的所有项目来创建初始状态。位于右侧。 useEffect 用于通过查看 Dragables 数据何时更改然后正确更新列表来更新未分配列表。另一部分是 onDragDrop，它确保 id 从未分配列表中删除。它当前正在使用您在项目上拥有的 CId，尽管您可能想要更改它。

为了使用 CId，我将未分配项目的 onDragEnd 函数调用修改为如下

  onDragEnd={event => {
                onDragEnd(event, p.refArea, p.CId);
              }}

希望我的代码有一点帮助

祝你好运!