React-dnd: Как отладить "Невозможно вызвать наведение после падения"?

Итак, исследовав проблему JS, я обнаружил, что до этой ошибки была ошибка, вызванная определенным пользователем обратным вызовом, когда должно было произойти падение, что затем могло нарушить состояние монитора / хранилища.

У меня тоже есть эта проблема - моя ситуация такова, что компонент React является и целью перетаскивания, и источником перетаскивания. Когда у меня есть два компонента, я могу перетащить их один раз, прежде чем возникнет указанная выше ошибка. Когда у меня три, работает без ошибок. Я полагаю, это как-то связано с множеством контекстов в одном компоненте?

У меня была эта проблема, и вчера вечером я нашел обходной путь для своего конкретного варианта использования.

Для контекста я рендерил список DragSources, и если какой-либо из них был перетащен на DropTarget, они были бы удалены из списка DragSources, а DropTarget был бы заменен компонентом, который отображает содержимое DragSource.

Важной частью этой функции перетаскивания (это компонент для сопоставления «категорий» с элементами) была функция для добавления элементов обратно в список DragSource, которая просто заменяла размещенный элемент на DragSource и добавляла его обратно в DragSources. список.

Теперь это исключение возникало только тогда, когда я помещал элементы во все категории и удалял хотя бы одну (а не тогда, когда список был неполным, и я бы удалил один и снова добавил его). Итак, я пришел к выводу, что список DragSources никогда не может иметь нулевых дочерних элементов, чтобы это произошло (возможно, из-за исчезновения элемента контейнера, но у меня не было достаточно времени, чтобы проверить это). Чтобы смягчить это, вместо удаления элементов из списка DragSources при размещении я просто установил их стиль на display: none

Это сложно объяснить, но я надеюсь, что это поможет.

Я испытываю тот же эффект, что и @PendragonDevelopment. Мой список начинается с одного элемента, к нему добавляется второй, а затем его можно изменить. Вы можете переставить два элемента только один раз, прежде чем начнете видеть ошибки Javascript, и вы никогда не сможете изменить их порядок снова.

У меня тоже есть эта проблема
Не знаю почему, но после первой перестановки вижу эти ошибки

У меня такая же ошибка.

После некоторого сравнения демонстрационного примера и моего я обнаружил, что когда я зацикливаю компоненты, я использую ключ массива для установки как ключа, так и индекса компонента, а в демонстрации они устанавливают только индекс Sortable / Simple / Container.js, а ключ фиксируется.

Сделал и заработал!

Ключ должен иметь фиксированное значение, потому что if не является ссылкой на компонент, которая теряется после изменения порядка массива.

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

{this.state.rows.map(function(row, key) {
  return (<RowComponent key={row.id} index={key} id={row.id} moveRow={that.moveRow} />);
})}

row.id уникален для каждого компонента

Я не понимаю, почему это работает, но использование моего model.id вместо случайного ключа, сгенерированного node-uuid's v4 исправило его. По крайней мере, я больше не получаю ошибок.

Ремонт ключа не решил мою проблему.
Это был мой код

           <ContentPatch>
             {tasks.loading 
              ? <div>...loading </div>
              : this.state.containers.map((item, i) => {
                  return (
                    <TaskStage
                      key={item.id}
                      item={item}
                      tasklist={tasks.tasks}
                      onDropped={this.handleDropped}
                      onBeginningDrag={this.onBeginningDrag}
                    />
                  );
                })}
          </ContentPatch>

После каждого сброшенного действия я отображал все элементы и получал ту же ошибку.
И я изменил свое состояние на

...
{tasks.loading && tasks.tasks.length===0
 ? <div>...loading </div>
...

и это решено. Думаю, опять же причиной этой ошибки является монтаж.

Я столкнулся с такой же ошибкой.

Мой вариант использования был:

• Одинаковые компоненты DragSource и DragTarget
• При падении я хотел перейти к маршруту

Оказывается, endDrag ( DragSource method) срабатывает после drop ( DropTarget method). Я управлял навигацией по маршруту в пределах drop что нарушало состояние монитора.

Эта логика перенесена в endDrag чтобы исправить это. Рефакторинг включал проверку того, завершено ли удаление с помощью monitor.didDrop() , но это было не так уж плохо.

У меня тоже есть эта проблема. В моем случае компонент является одновременно целью перетаскивания и источником перетаскивания. Я попытался использовать метод endDrag и попытался использовать исправленный бэкэнд (https://gist.github.com/nickpresta/eb5cce69d650db4c2795). Это не решило эту проблему.

мой компонент:

@DropTarget<HeadColOwnProps>(TaskDndTypes.headCol, headColTargetSpec, headColTargetCollector)
@DragSource<HeadColOwnProps>(TaskDndTypes.headCol, headColSourceSpec, headColSourceCollector)
class HeadColComponent extends React.Component<any, void> {
    render() {
        const props = this.props;
        return this.props.dndConnectDropTarget(
            this.props.dndConnectDragPreview(
                <div>
                    <div className={block('panels-task__drag')({start: props.dndIsDragging})}>
                        <SortingIcon
                            label={props.label}
                            arrowIsVisible={props.sortingIsPossible}
                            direction={props.sortingDirection}
                            clickHandler={props.sortingHandler}
                        />
                        {this.props.dndConnectDragSource(
                            <span className="panels-task__drag-control">
                                <SVGIcon width={10} height={10} url={'#icon-drag-and-drop-cell'} />
                            </span>
                        )}
                    </div>
                </div>
            )
        );
    }
}

Пример использования:

const renderHeadCellId = (): JSX.Element => {
        return (
            <TaskCellHead key="key-head-col-id" modifications={{ number: true }}>
                <HeadColComponent
                    label="#"
                    key="key-dnd-head-col-id"
                    taskColType={TaskCols.id}
                    sortingIsPossible={false}
                    taskColsOrder={taskStore.orderCols}
                    updateDragProcess={(dp: TaskColDragProcess | null) => taskStore.updateDragProcess(dp)}
                    updateOrderCols={(order: TaskCols[]) => taskStore.updateOrderCols(order)}
                    dragProcess={taskStore.dragProcess}
                />
            </TaskCellHead>
        );
    };

Настройки декоратора:

const headColSourceSpec: DragSourceSpec<HeadColOwnProps> = {
    beginDrag(props: HeadColOwnProps): DraggedItem {
        return { sourceColType: props.taskColType };
    },
    canDrag(props: HeadColOwnProps): boolean {
        return props.taskColsOrder.length > 1;
    },
    endDrag(props: HeadColOwnProps, monitor: DragSourceMonitor): void {
        console.debug('endDrag');
        if (!monitor.didDrop()) {
            return;
        }
        console.debug('endDrag finish');
        props.updateOrderCols((monitor.getDropResult() as DroppedResult).newOrderCols);
    }
};

const headColTargetSpec: DropTargetSpec<HeadColOwnProps> = {
    drop(props: HeadColOwnProps, monitor: DropTargetMonitor): DroppedResult {
        console.debug('drop');
        return {
            newOrderCols: getNewOrder((monitor.getItem() as DraggedItem).sourceColType, props.taskColsOrder, props.dragProcess)
        };
    },
    hover(props: HeadColOwnProps, monitor: DropTargetMonitor, component: HeadColComponent): Object | void {
        if (!monitor.canDrop()) {
            return;
        }
        // ...
        props.updateDragProcess(currentDragProcess);
    },
    canDrop(props: HeadColOwnProps, monitor: DropTargetMonitor): boolean {
        return props.taskColType !== (monitor.getItem() as DraggedItem).sourceColType;
    }
};

const headColSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    dndConnectDragSource: connect.dragSource(),
    dndConnectDragPreview: connect.dragPreview(),
    dndIsDragging: monitor.isDragging()
});

const headColTargetCollector = (connect: DropTargetConnector, monitor: DropTargetMonitor) => {
    return {
        dndConnectDropTarget: connect.dropTarget(),
        dndIsOverCurrent: monitor.isOver({ shallow: true })
    };
};

Заметил, что после перестановки endDrag не вызывается, а вызывается drop . Эти строки никогда не выполняются:

endDrag(props: HeadColOwnProps, monitor: DragSourceMonitor): void {
        console.debug('endDrag');
        if (!monitor.didDrop()) {
            return;
        }
        console.debug('endDrag finish');
        props.updateOrderCols((monitor.getDropResult() as DroppedResult).newOrderCols);
    }

Что я делаю неправильно? Есть идеи?

Я заменил HTML5Backend на Touch Backend (https://github.com/yahoo/react-dnd-touch-backend). Меня устраивает.

Для меня я получал эту ошибку только из-за того, что в обратном вызове были установлены точки останова. Что интересно, это не сработает даже после того, как все точки останова были продолжены и браузер не был приостановлен. Как только я удалил точки останова, ошибка исчезла.

У меня такая же проблема. Заменил этот пакет на response-dnd-touch-backend, но это не помогает решить проблему. Я бы предпочел запустить html5. Пробовал устанавливать ключи для всех элементов, которые печатаются итератором.

Я получал ту же ошибку. Я повторно применял HOC к перетаскиваемым компонентам на каждом рендере, поэтому они всегда были разными, что сбивало с толку react-dnd.

@hakunin , вы разрешили это (я также получаю эту ошибку только после того, как произошла другая ошибка времени выполнения).

С тех пор я реорганизовал весь код DnD, который у меня есть, и все еще получаю его, когда начинаю перетаскивать. Теперь, когда я переместил весь код в один файл утилиты и сделал его настраиваемым, я мог бы наконец найти причину, по которой это происходит в какой-то момент. Я напишу об этом здесь, когда сделаю это. (Я использую TouchBackend в настройках мыши, кстати)

Спасибо за ответ. Я получаю эту ошибку только после того, как при перетаскивании возникает другая ошибка - и в этот момент ее невозможно исправить. это то же самое для вас?

Моя жалуется каждый раз, когда я начинаю тащить.

В моем случае компонент в endDrag (props, monitor, component) был неопределенным после того, как элемент был удален. Так что это вызывало мою исходную ошибку, которая привела к консольному потоку сообщений «Невозможно вызвать наведение после сброса».

Мне удалось решить эту проблему благодаря этому комментарию: https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

Я встречал это, когда раньше вызывал другую невыявленную ошибку. Этой ошибки не было, когда не было других ошибок.

В моем случае это произошло, когда в endDrag я вызываю действие / функцию, вызывающую ошибку. Итак, в основном необработанная ошибка привела к зависанию dnd. вы можете использовать try catch при вызове некоторой функции / действия в блоке endDrag.
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

Оператор отладчика внутри функции onDrop также был для меня источником ошибки. Удаление его приводит к исчезновению ошибки, но тогда мне трудно отлаживать без нее.

Есть идеи, почему отладчик вызывает эту ошибку?

Не уверен, что это интересно, но я использую приложение Electron.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.