时间戳

首页 > 解决方案 > react hooks 为什么我的拖放项目卡住了？

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

问题描述

我正在学习反应钩子并通过实践来学习最好。

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

我追求的是：

在此处输入图像描述

左侧就像一张带椅子的桌子。每个绿色区域都是一把椅子，我们可以将物品放到上面。

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

问题：

在此处输入图像描述

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

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

它有很多代码，所以我创建了这个沙箱。

感谢您的任何想法！

标签： javascriptreactjsreact-hooks

解决方案

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

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

我确实想出了一个解决方案来修复您的代码沙箱代码，尽管这绝对不是最优雅的方式，而且还有很多其他方式可以解决这个问题。我决定解决此问题的方法是使用 useEffect 挂钩更新 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 数据何时更改然后正确更新列表来更新未分配列表。另一部分是确保从未分配列表中删除 id 的 onDragDrop。它当前正在使用您在项目上拥有的 CId，尽管您可能想要更改它。

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

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

希望我的代码有点帮助

祝你好运！

推荐阅读