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

Question

我正在学习 React Hooks 并且边做边学。

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

我追求的是:

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

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

问题:

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

我想我必须在任何地方都使用相同的数据集，这样所有的子组件都从父组件继承数据，当数据在一个组件中通过 setDragables 更新时，我想一切都会更新，但它不是这样的……

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

感谢任何想法!

Answer 1

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

似乎主要问题是当你从左到右时它没有重新渲染，但是当你从右到左时正确地重新渲染。当您执行多个拖放操作时，右侧列表将更新为具有上一个拖放应具有的正确值。因此，进一步研究为什么不重新渲染会有好处。

我确实想出了一个解决方案来修复你的代码沙盒代码，虽然这绝对不是最优雅的方法，还有很多其他方法可以解决这个问题。我决定解决此问题的方法是在使用 useEffect Hook 更新可拖动对象时更新状态。然后我为未分配的创建状态。

代码沙箱链接在这里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 数据然后正确更新列表来更新未分配列表。另一部分是确保从未分配列表中删除 id 的 onDragDrop。它当前正在使用您在项目上拥有的 CId，尽管您可能想要更改它。

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

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

希望我的代码能对您有所帮助

祝你好运!