Бесконечный цикл при перетаскивании карты с React DnD - PullRequest
Новая
       30

Бесконечный цикл при перетаскивании карты с React DnD

0 голосов
/ 07 ноября 2019

Я использую React DnD , чтобы перетаскивать карты внутри доски Канбан. Все еще пытаюсь разобраться с библиотекой, но у меня есть одна проблема с моим DropTarget.

Как только я начинаю перетаскивать карту, разворачивается бесконечный цикл, вызванный dispatch звонком в мой магазин, чтобы перенастроитьдоска. 


/* draggable-card.js */

const DraggableCard = ({isDragging, isSpacer, connectDragSource, connectDropTarget}) => {

  return _.flowRight(connectDragSource, connectDropTarget)(
    <div
      className={classNames('Card', {
        'Card--dragging': isDragging,
        'Card--spacer': isSpacer,
      })}
    >
      /* Card JSX goes here */
    </div>
  )
}

export default _.flowRight([
  connect(),
  DropTarget(
    'Card',
    {
      hover(props, monitor) {
        const {columnId, index, dispatch} = props
        const draggingItem = monitor.getItem()

        if (draggingItem.id !== props.id) {

          // this action is dispatched to my redux store where the 
          // card configuration is changed to reflect the card in the new position
          dispatch(moveCardAction({
            srcCardId: draggingItem.id,
            destColumnId: columnId,
            destIndex: index,
            dispatch
          }))
        }
      },
    },
    connect => ({
      connectDropTarget: connect.dropTarget(),
    })
  ),
  DragSource(
    'Card',
    {
      beginDrag(props) {
        return {id: props.id}
      },

      isDragging(props, monitor) {
        return props.id === monitor.getItem().id
      },
    },
    (connect, monitor) => ({
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging(),
    })
  )
])(DraggableCard)

Карты можно брать и перетаскивать, но там, где в хранилище вызывается метод dispatch (который изменяет состояние, отражая новую доску при перетаскивании карты). ) бесконечный цикл начинает захватывать управление.

Вызывает ли dispatch изнутри этот hover метод, нестандартный в мире React Dnd? Есть ли способ обновить хранилище при перетаскивании, не вызывая бесконечного переполнения цикла / стека?

...