Javascript 为什么我的拖放项目会被卡住？
我在学习，在实践中学习得最好 我想我会做一些有趣的事情，并找到了一个关于如何使用react实现拖放的在线教程。 这是通过类组件完成的，所以我通过修改它并使用钩子来挑战自己 我追求的是： 左边像一张有椅子的桌子。每个绿色区域都是一把椅子，我们可以把一件物品放在上面 右侧：就像一袋物品，放在自己的“椅子”上。就像用户将其放置在椅子上之前的临时位置 问题: 我可以将一个项目从左侧拖动到右侧，没有问题，但是当从右侧拖动到左侧时，项目会从左侧掉落，但也会保留在右侧 我想我必须在任何地方使用相同的数据集，以便所有子组件都从父组件继承数据，当数据通过Javascript 为什么我的拖放项目会被卡住？,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我在学习，在实践中学习得最好 我想我会做一些有趣的事情，并找到了一个关于如何使用react实现拖放的在线教程。 这是通过类组件完成的，所以我通过修改它并使用钩子来挑战自己 我追求的是： 左边像一张有椅子的桌子。每个绿色区域都是一把椅子，我们可以把一件物品放在上面 右侧：就像一袋物品，放在自己的“椅子”上。就像用户将其放置在椅子上之前的临时位置 问题: 我可以将一个项目从左侧拖动到右侧，没有问题，但是当从右侧拖动到左侧时，项目会从左侧掉落，但也会保留在右侧 我想我必须在任何地方使用相同的数据集
setDragables感谢你的任何想法 我很难浏览您的代码，因为代码太多了 似乎主要的问题是，从左向右时，它不会重新渲染，但从右向左时，它会正确地重新渲染。 进行多个拖放操作时，将更新右侧列表，使其具有上一次拖放时应有的正确值。 因此，深入研究为什么不重新渲染将是有益的 我确实提出了一个解决方案来修复您的代码沙盒代码，尽管这肯定不是最优雅的方法，而且还有许多其他方法可以解决这个问题。 我决定解决这个问题的方法是在使用useEffect钩子更新Dragables时更新状态。然后，我为未分配的创建了状态 代码沙盒链接在这里 我所做的唯一更改是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]);
onDragEnd={event => {
onDragEnd(event, p.refArea, p.CId);
}}
祝你好运