Question

我正在学习做出反应，并从中学习得最好。

我以为id会很有趣，并找到了有关如何使用react实现拖放的在线教程。这是使用类组件完成的，因此我通过更改和使用钩子来挑战自己。

我追求的是：

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

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

问题：

从右侧拖到左侧时，我可以从左拖到右侧，但没有问题，但该物品被放到左侧，但也保留在右侧。

我认为我到处都必须使用同一组数据，因此所有子组件都将从父级继承数据，并且当通过setDragables在一个组件中更新数据时，我认为一切都会更新，但并不是情况...

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

感谢任何想法！

Answer 1

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

似乎主要的问题是，从左向右移动时它没有重新渲染，而从右向左移动时它正在正确地重新渲染。当您执行多个拖放操作时，右侧列表将更新为具有正确的值，该值应与上一个拖放相同。因此，进一步研究为什么不重新渲染将是有益的。

我确实提出了解决您的代码沙箱代码的解决方案，尽管这绝对不是最优雅的方法，并且还有许多其他方法可以解决此问题。我决定解决此问题的方法是使状态在使用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数据的更改来更新未分配的列表，然后正确更新列表。另一部分是onDragDrop，它确保将ID从未分配列表中删除。尽管您可能想更改它，但当前正在使用项目上的CId。

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

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

希望我的代码有帮助

祝你好运！

react hooks为什么我的拖放项目被卡住？

1 个答案: