React-dnd: Wie debugge ich "Hover kann nach dem Löschen nicht aufgerufen werden"?

Als ich das JS-Problem untersuchte, stellte ich fest, dass vor diesem Fehler ein Fehler von einem benutzerdefinierten Rückruf ausgelöst wurde, wenn ein Löschen erfolgen soll, der dann den Status des Monitors / Speichers hätte beschädigen können.

Ich habe auch dieses Problem - meine Situation ist so, dass die React-Komponente sowohl das Drop-Ziel als auch die Drag-Quelle ist. Wenn ich zwei Komponenten habe, kann ich sie einmal ziehen und ablegen, bevor der obige Fehler ausgelöst wird. Wenn ich drei habe, funktioniert es ohne Fehler. Ich nehme an, es hat etwas mit den mehreren Kontexten einer einzelnen Komponente zu tun.

Ich hatte dieses Problem und habe letzte Nacht eine Problemumgehung für meinen speziellen Anwendungsfall gefunden.

Für den Kontext habe ich eine Liste von DragSources gerendert, und wenn eine dieser Dateien auf ein DropTarget abgelegt wurde, wurden sie aus der Liste der DragSources entfernt und das DropTarget durch eine Komponente ersetzt, die den Inhalt der DragSource rendert.

Ein wesentlicher Bestandteil dieser Drag & Drop-Funktion (es ist eine Komponente zum Zuordnen von 'Kategorien' zu Elementen) war eine Funktion zum Hinzufügen von Elementen zur DragSource-Liste, bei der das platzierte Element lediglich durch eine DragSource ersetzt und wieder zu den DragSources hinzugefügt wurde Liste.

Diese Ausnahme trat nur auf, wenn ich Elemente in alle Kategorien einfügte und mindestens eines entfernte (nicht, wenn die Liste nicht voll war und ich eines entfernte und wieder hinzufügte). Daher kam ich zu dem Schluss, dass die DragSources-Liste niemals null untergeordnete Elemente enthalten könnte (möglicherweise aufgrund des Verschwindens des Containerelements, aber ich hatte nicht genügend Zeit, dies zu testen). Um dies zu mildern, habe ich, anstatt Elemente bei der Platzierung aus der DragSources-Liste zu entfernen, ihren Stil einfach auf display: none

Es ist schwer zu erklären, aber ich hoffe, das hilft.

Ich habe den gleichen Effekt wie @PendragonDevelopment. Meine Liste beginnt mit einem Element, wird um ein zweites Element erweitert und kann dann neu angeordnet werden. Sie können die beiden Elemente nur einmal neu anordnen, bevor Sie Javascript-Fehler sehen, und Sie können sie nie wieder neu anordnen.

Ich habe auch dieses Problem
Ich weiß nicht warum, aber nach der ersten Neuanordnung sehe ich diese Fehler

Ich habe hier den gleichen Fehler.

Nach einigem Vergleich des Demo-Beispiels mit meinem stellte ich fest, dass ich beim Schleifen der Komponenten den Array-Schlüssel verwende, um sowohl den Schlüssel als auch den Index der Komponente festzulegen. In der Demo wurde nur der Index Sortable / Simple / Container.js festgelegt, und der Schlüssel ist fest.

Hab es geschafft und funktioniert!

Der Schlüssel muss ein fester Wert sein, da sonst der Verweis auf die Komponente nach der Neuordnung des Arrays verloren geht.

Wenn Sie dynamisch Komponenten erstellen und DnD anhängen, müssen Sie eine Bibliothek verwenden, oder Date.now() führt dies aus, um eindeutige Schlüssel für jede Komponente zu generieren.

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

row.id ist für jede Komponente eindeutig

Ich verstehe nicht, warum es funktioniert, aber die Verwendung meiner model.id anstelle eines zufälligen Schlüssels, der von node-uuid's v4 generiert wurde, hat das Problem behoben. Zumindest bekomme ich keine Fehler mehr.

Der Fixierschlüssel hat mein Problem nicht gelöst.
Das war mein Code

           <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>

Nach jeder abgelegten Aktion habe ich alle Elemente zugeordnet und den gleichen Fehler erhalten.
Und ich habe meinen Zustand geändert in

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

und es ist gelöst. Ich denke, wieder Montage ist Grund für diesen Fehler.

Ich bin auf denselben Fehler gestoßen.

Mein Anwendungsfall war:

• Gleiche DragSource und DragTarget Komponente
• Beim Ablegen wollte ich zu einer Route navigieren

Es stellt sich heraus, dass endDrag ( DragSource Methode) nach drop ( DropTarget Methode) ausgelöst wird. Ich habe die Routennavigation innerhalb von drop abgewickelt, was den Status des Monitors verletzt hat.

Diese Logik wurde auf endDrag verschoben, um das Problem zu beheben. Beim Refactoring wurde überprüft, ob der Drop mit monitor.didDrop() , aber nicht schlecht.

Ich habe auch dieses Problem. Mein Fall ist so, dass die Komponente sowohl das Ablageziel als auch die Ziehquelle ist. Ich habe versucht, die endDrag-Methode und das gepatchte Backend zu verwenden (https://gist.github.com/nickpresta/eb5cce69d650db4c2795). Es hat dieses Problem nicht gelöst.

meine Komponente:

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

Anwendungsbeispiel:

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

Dekorateureinstellungen:

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

Mir ist aufgefallen, dass nach der Umlagerung endDrag nicht aufgerufen wird, sondern drop . Diese Zeilen werden niemals ausgeführt:

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

Was mache ich falsch? Irgendwelche Ideen?

Ich habe HTML5Backend durch Touch Backend ersetzt (https://github.com/yahoo/react-dnd-touch-backend). Für mich geht das.

Für mich wurde dieser Fehler nur angezeigt, weil im Rückruf auf der Drop-Position Haltepunkte festgelegt wurden. Interessant ist, dass es auch dann fehlschlagen würde, wenn alle Haltepunkte fortgesetzt wurden und der Browser nicht angehalten wurde. Sobald ich die Haltepunkte entfernt habe, ist der Fehler weg.

Ich habe das gleiche Problem. Dieses Paket wurde durch "React-Dnd-Touch-Backend" ersetzt, aber das hilft nicht wirklich, das Problem zu lösen. Ich würde lieber HTML5 ausführen. Versuchte Einstellungsschlüssel für alle Elemente, die von einem Iterator gedruckt werden.

Ich habe den gleichen Fehler bekommen. Ich habe bei jedem Rendering erneut ein HOC auf die ziehbaren Komponenten angewendet, damit sie immer unterschiedlich waren, was die Reaktion verwirrte.

@hakunin hast du das

Ich habe seitdem den gesamten DnD-Code, den ich habe, überarbeitet und bekomme ihn immer noch, wenn ich anfange zu ziehen. Nachdem ich den gesamten Code in eine einzige Util-Datei verschoben und konfigurierbar gemacht habe, kann ich möglicherweise endlich den Grund dafür finden. Werde hier darüber posten, wenn ich es tue. (Ich benutze TouchBackend übrigens in der Mauseinstellung)

Danke für die Antwort. Ich erhalte diesen Fehler erst, nachdem beim Ziehen ein anderer Fehler aufgetreten ist - an diesem Punkt scheint er nicht mehr behebbar zu sein. ist das das gleiche für dich

Meins beschwert sich jedes Mal, wenn ich anfange zu ziehen.

Mein Fall war, dass die Komponente in endDrag (Requisiten, Monitor, Komponente) undefiniert war, nachdem das Element gelöscht wurde. Das verursachte also meinen ursprünglichen Fehler, der zum Konsolenstrom der Meldungen "Hover nach Drop kann nicht aufgerufen werden" führte.

Ich konnte dieses Problem dank dieses Kommentars beheben: https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

Ich habe dies getroffen, als ich zuvor einen anderen nicht abgefangenen Fehler verursacht habe. Es gibt keinen Fehler, wenn es keine anderen Fehler gab.

In meinem Fall ist es passiert, als ich in endDrag eine Aktion / Funktion aufrufe, die einen Fehler verursacht. Ein grundsätzlich nicht erfasster Fehler machte dnd stecken. Sie können try catch verwenden, wenn Sie eine Funktion / Aktion im endDrag-Block aufrufen.
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

Eine Debugger-Anweisung innerhalb der onDrop-Funktion war für mich auch die Fehlerquelle. Wenn ich es entferne, verschwindet der Fehler, aber dann fällt es mir schwer, ohne ihn zu debuggen.

Irgendeine Idee, warum der Debugger diesen Fehler auslöst?

Ich bin mir nicht sicher, ob es von Interesse ist, aber ich verwende eine Electron-App.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.