在第二次拖动时拖动项目时出现奇怪的行为 react-beautiful-dnd

IT技术 reactjs firebase-realtime-database react-beautiful-dnd
2021-05-19 07:23:29

出于某种原因,在使用 react-beautiful-dnd 包时,每秒拖动的效果不是很好(见图)

在此处输入图片说明

我的 onDragEnd 函数如下所示:

  const onDragEnd = result => { 
    if (!result.destination) {
      return;
    }

    if (
      result.destination.droppableId === result.source.droppableId &&
      result.destination.index === result.source.index
    ) {
       return;
    }

    const draggedItem = list[result.source.index];
    list.splice(result.source.index, 1);
    list.splice(result.destination.index, 0, draggedItem);

    /** Firebase update */
    dbCon.once('value', function(snapshot) {
       snapshot.forEach(function(child) {
         list.map((listChild, index) => {
           if (listChild.props.draggableId === child.key) {
             child.ref.update({ position: index });
           }
         });
       });
     });

    setList(getNodes);
  };

拥有返回子组件的 getNodes

不确定这种行为的责任是什么..有什么想法吗?

2个回答

当我使用 react-beautiful-dnd 版本 11.0.0-beta 时,我遇到了类似的问题。

Downgrading to 10.1.1 fixed the problem.

您可以在 11.0.0-beta 中找到类似的问题,其中 isDragDisabled 在这里不起作用

请记住,11.0仍然在beta目前不推荐用于生产。如果您遇到任何问题,请使用稳定10.x版本。

我们感谢您提供有关您面临的任何问题的详细信息,11.0以便我们可以解决这些问题。提交问题