Strange behavior when dragging items on the second drag react-beautiful-dnd

问题

For some reason every second drag is not performing very well when using the react-beautiful-dnd package (see image)

my onDragEnd function is looking like this:

  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);
  };

Having getNodes that is returning child components

Not sure what the responsible is for this behaviour.. any ideas?

回答1:

I had this similar issue when I used react-beautiful-dnd version 11.0.0-beta.

Downgrading to 10.1.1 fixed the problem.

You can find the similar issue with 11.0.0-beta where isDragDisabled not working here

回答2:

Keep in mind that 11.0 is still in beta! It is not recommended for production yet. If you face any issues, please use the stable 10.x release.

We appreciate details on any issues you are facing with 11.0 so we can address them. Submit an issue

来源：https://stackoverflow.com/questions/55504775/strange-behavior-when-dragging-items-on-the-second-drag-react-beautiful-dnd