React-dnd: Comment déboguer "Impossible d'appeler le survol après la chute"?

J'ai donc étudié le problème JS, j'ai découvert qu'avant cette erreur, une erreur était générée par un rappel défini par l'utilisateur lorsque la suppression est censée se produire, ce qui aurait alors pu briser l'état du moniteur / magasin.

J'ai également ce problème - ma situation est telle que le composant React est à la fois la cible de dépôt et la source de glissement. Lorsque j'ai deux composants, je peux glisser-déposer une fois avant de générer l'erreur ci-dessus. Quand j'en ai trois, ça marche sans erreur. Je suppose que cela a quelque chose à voir avec les multiples contextes sur un seul composant?

J'ai eu ce problème et j'ai trouvé une solution de contournement pour mon cas d'utilisation particulier hier soir.

Pour le contexte, je rendais une liste de DragSources, et si l'un d'entre eux était déposé sur un DropTarget, il serait supprimé de la liste des DragSources et le DropTarget serait remplacé par un composant qui rendrait le contenu du DragSource.

Une partie essentielle de cette fonctionnalité de glisser-déposer (c'est un composant pour faire correspondre les `` catégories '' aux éléments) était une fonctionnalité permettant de rajouter des éléments à la liste DragSource, qui remplacerait simplement l'élément placé par un DragSource et le rajouterait aux DragSources liste.

Maintenant, cette exception ne s'est produite que lorsque je plaçais des éléments dans toutes les catégories et en supprimais au moins un (pas lorsque la liste n'était pas pleine et que je supprimais un et l'ajoutais à nouveau). Je suis donc arrivé à la conclusion que la liste DragSources ne pourrait jamais avoir aucun enfant pour que cela se produise (peut-être en raison de la disparition de l'élément conteneur, mais je n'ai pas eu assez de temps pour le tester). Pour atténuer cela, au lieu de supprimer des éléments de la liste DragSources lors du placement, je viens de définir leur style sur display: none

C'est difficile à expliquer, mais j'espère que cela aide.

Je ressens le même effet que @PendragonDevelopment. Ma liste commence par un élément, en reçoit un second, puis peut être réorganisée. Vous ne pouvez réorganiser les deux éléments qu'une seule fois avant de commencer à voir des erreurs Javascript, et vous ne pourrez plus jamais les réorganiser.

J'ai ce problème aussi
Je ne sais pas pourquoi mais après le premier réarrangement, je vois ces erreurs

J'ai eu la même erreur ici.

Après quelques comparaisons entre l'exemple de démonstration et le mien, j'ai constaté que lorsque je boucle les composants, j'utilise la clé de tableau pour définir le composant à la fois la clé et l' index et dans la démo, ils définissent uniquement l' index Sortable / Simple / Container.js et la clé est fixe.

Je l'ai fait et a fonctionné!

La clé doit avoir une valeur fixe car si ce n'est pas le cas, la référence au composant est perdue après la réorganisation du tableau.

Lorsque vous créez et attachez dynamiquement des composants DnD, vous devez utiliser une bibliothèque ou peut-être que Date.now() fera pour générer des clés uniques pour chaque composant.

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

row.id est unique pour chaque composant

Je ne comprends pas pourquoi cela fonctionne, mais utiliser mon model.id au lieu d'une clé aléatoire générée par node-uuid's v4 corrigé. Au moins, je ne reçois plus d'erreurs.

La clé de réparation n'a pas résolu mon problème.
C'était mon 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>

Après chaque action abandonnée, je mappais tous les éléments et j'obtenais la même erreur.
Et j'ai changé ma condition en

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

et c'est résolu. Je pense, encore une fois, le montage est la raison de cette erreur.

Je suis tombé sur cette même erreur.

Mon cas d'utilisation était:

• Même composant DragSource et DragTarget
• En drop, je voulais naviguer vers un itinéraire

Il s'avère que endDrag ( DragSource méthode) se déclenche après drop ( DropTarget méthode). Je gérais la navigation d'itinéraire dans drop qui cassait l'état du moniteur.

Déplacement de cette logique vers endDrag pour le corriger. La refactorisation impliquait de vérifier si le dépôt était complet avec monitor.didDrop() , mais ce n'était pas trop mal.

J'ai ce problème aussi. Mon cas est tel que le composant est à la fois la cible de dépôt et la source de glissement. J'ai essayé d'utiliser la méthode endDrag et j'ai essayé d'utiliser un backend patché (https://gist.github.com/nickpresta/eb5cce69d650db4c2795). Cela n'a pas résolu ce problème.

mon composant:

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

Exemple d'utilisation:

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

Paramètres du décorateur:

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

J'ai remarqué qu'après le réarrangement, endDrag n'est pas appelé, mais drop est appelé. Ces lignes ne sont jamais exécutées:

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

Qu'est-ce que je fais mal? Des idées?

J'ai remplacé HTML5Backend par Touch Backend (https://github.com/yahoo/react-dnd-touch-backend). Ça marche pour moi.

Pour moi, j'obtenais cette erreur juste pour avoir défini des points d'arrêt dans le rappel sur la baisse. Ce qui est intéressant, c'est qu'il échouerait même après que tous les points d'arrêt ont été poursuivis et que le navigateur n'a pas été mis en pause. Dès que j'ai supprimé les points d'arrêt, l'erreur était absente.

J'ai le même problème. Remplacement de ce package par react-dnd-touch-backend mais cela n'aide pas vraiment à résoudre le problème. Je préférerais exécuter html5. Essais de réglage des clés sur tous les éléments imprimés par un itérateur.

J'obtenais la même erreur. Je réappliquais un HOC sur les composants déplaçables sur chaque rendu afin qu'ils soient toujours différents, ce qui confondait react-dnd.

@hakunin avez-vous résolu cela (je n'obtiens également cette erreur qu'après une autre erreur d'exécution).

Depuis, j'ai refactoré tout le code DnD que j'ai et je le reçois toujours lorsque je commence à faire glisser. Maintenant que j'ai déplacé tout le code dans un seul fichier util et l'ai rendu configurable, je pourrais peut-être enfin trouver la raison pour laquelle cela se produit à un moment donné. Je publierai à ce sujet ici quand je le ferai. (J'utilise TouchBackend dans les paramètres de la souris btw)

Merci pour la réponse. Je n'obtiens cette erreur qu'après qu'une autre erreur se soit produite lors du glissement - à quel point elle semble irrécupérable. est-ce la même chose pour vous?

Le mien se plaint à chaque fois que je commence à traîner.

Mon cas était que le composant dans endDrag (accessoires, moniteur, composant) n'était pas défini après la suppression de l'élément. Cela provoquait donc mon erreur d'origine qui a conduit au flux de console de messages "Impossible d'appeler le survol après la suppression".

J'ai pu résoudre ce problème grâce à ce commentaire: https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

J'ai rencontré cela quand j'ai causé une autre erreur non corrigée auparavant. Il n'y a pas cette erreur quand il n'y avait pas d'autres erreurs.

Dans mon cas, cela s'est produit lorsque endDrag j'appelle une action / fonction qui cause une erreur. Donc, fondamentalement, une erreur non corrigée a rendu dnd bloqué. vous pouvez utiliser try catch lors de l'appel d'une fonction / action dans le bloc endDrag.
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

Une instruction de débogage à l'intérieur de la fonction onDrop était également la source de l'erreur pour moi. Le supprimer fait disparaître l'erreur, mais j'ai du mal à déboguer sans elle.

Une idée de la raison pour laquelle le débogueur déclenche cette erreur?

Je ne sais pas si cela vous intéresse, mais j'utilise une application Electron.

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.