React-dnd: Erreur non détectée : violation invariante : devrait trouver une cible valide.

Peux-tu partager ton code ?

Oui, s'il vous plaît, mettez le code exécutable quelque part.
Cela aiderait également beaucoup d'entre vous à utiliser la version sur NPM afin qu'il soit plus facile de déboguer le problème.

J'ai trouvé l'erreur en créant un exemple pour vous les gars. L'objet que j'ai renvoyé dans beginDrag ne contenait pas d'identifiant. React a probablement eu un problème avec cela, ce qui aurait pu causer cette erreur dans React-Dnd.

Intéressant, merci ! Nous n'imposons pas vraiment de restrictions sur ce que beginDrag() renvoie tant qu'il s'agit d'un objet simple, donc je me demande quel était le flux d'erreur.

Désolé d'avoir ajouté à un ancien fil de discussion, mais comme il s'agit de la seule référence à cette erreur sur tout Internet, j'ai pensé que quelqu'un pourrait trouver ce qui suit utile à l'avenir.

J'ai eu la même erreur, mais le problème était que j'avais un composant (similaire à Card dans les exemples) qui était décoré de _both_ wrappers glisser-déposer.

Lorsque simulateBeginDrag commencé, il a envoyé la _cible de dépôt_ (au lieu de la source de glissement) au validateur, qui a correctement échoué. La solution consistait à descendre d'un niveau (avec getDecoratedComponentInstance() ) lors de l'obtention de l'identifiant du gestionnaire.

@yannisbarlas super trouvaille. J'ai rencontré exactement le même problème. Peut-être qu'il peut y avoir une mention de cela dans les documents de test ?

@yannisbarlas Merci beaucoup pour la trouvaille ! M'a beaucoup aidé des tonnes de frustration :)

Juste au cas où quelqu'un tomberait sur cette erreur et ce problème, j'ai eu un problème similaire lors de la composition d'une liste triable et chaque élément ayant une clé composée de la concaténation de son identifiant et de son index sur la liste.
Le correctif a été simplement effectué en définissant une clé appropriée (c'est-à-dire cohérente) pour l'élément déplacé.

@yannisbarlas Avez-vous un exemple de code de votre solution ?

Désolé pour la réponse tardive @damiangreen , l'e-mail de notification est passé juste devant moi.

Le code a été déprécié (ça fait un moment), mais vous pouvez le vérifier ici .

Si quelqu'un s'exécute toujours dans ce problème, veuillez noter que l'élément de la liste que vous mappez doit avoir un accessoire de clé persistant . Dans mon cas, j'envoyais une action Redux pour modifier les éléments de la liste, puis je fournissais la clé de l'élément mappé comme ceci :

blocks.map((block, idx) => {
  <React.Fragment key={`${block.name}_${idx}`}>
    ...
  <React.Fragment />
})

qui déclenche apparemment l'erreur, car le idx change à la volée.

merci @chulanovskyi
pour moi ça ressemblait à ça :
JSX arr.map((item, idx) => ( <Item item={item} // key={`${idx}_${item.id}`} // this was busted because idx key={item.key} // when adding this to the array elsewhere i use a count for uniqueness index={idx} > </Item> ))

Pour moi, cette erreur est causée par des zones de dépôt créées dynamiquement - lorsque le dernier élément est déplacé d'une zone de dépôt, React effectue un nouveau rendu sans cette zone et cela semble provoquer l'exception. C'est peut-être une condition de concurrence où la zone est supprimée juste avant de déplacer l'élément bien que les groupes soient dérivés des mêmes éléments changent hmm

Pour moi, cette erreur est causée par des zones de dépôt créées dynamiquement - lorsque le dernier élément est déplacé d'une zone de dépôt, React effectue un nouveau rendu sans cette zone et cela semble provoquer l'exception. C'est peut-être une condition de concurrence où la zone est supprimée juste avant de déplacer l'élément bien que les groupes soient dérivés des mêmes éléments changent hmm

Salut @DominicTobias
J'ai également créé dynamiquement des zones de dépôt.
Comment l'avez-vous réparé?

@raymond-ong

J'ai également créé dynamiquement des zones de dépôt.
Comment l'avez-vous réparé?

En d'autres termes, le problème peut être que vous avez à nouveau créé le composant parent (niveau supérieur).
Dans ce cas, react-dnd lost id (son identifiant interne) avec lequel il fonctionne et génère une erreur.

Dans mon cas, j'ai mis id jour le paramètre updating id functionality tout commence à fonctionner correctement.

J'ai aussi ce problème. Dans mon cas, cela ne se produit que lorsque la cible de dépôt renvoie false sur canDrop. Quelqu'un peut-il poster votre solution à ce problème? Quelqu'un a mentionné que c'était lié à une pièce d'identité manquante, mais je ne sais pas où mettre la pièce d'identité ?

Je suis confronté au même problème, j'ai réussi à modifier un exemple de la doc, vous pouvez le voir ici en faisant glisser/déposer autour du premier élément : https://codesandbox.io/s/broken-feather-qf0f2?file= /src/Conteneur.jsx

J'ai également créé un problème avec tous les détails (peut-être aurais-je dû poster ici ?) #2693

J'ai eu le même problème, et je l'ai résolu comme ceci :

mon code ressemblait

const ParentOfCards = () => {    

     const [ cards, setCards ] = useState([ ... ])

    const CardComponent = ({ card, index }) => {
       return (/**/)
    }
    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )

}

il s'avère que vous ne pouvez pas mettre CardComponent intérieur de ParentOfCards (je pense que cela a à voir avec les rendus), alors j'ai résolu le problème en séparant CardComponent du ParentOfCards portée :

const ParentOfCards = () => {    

     const [ cards, setCards ] = useState([ ... ])


    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )

}

const CardComponent = ({ card, index }) => {
       return (/**/)
}

Et maintenant ( après deux jours de débogage :c ) ça marche ! ??

@marcelomrtnz Merci beaucoup
Vous m'avez fait gagner beaucoup de temps sur ce problème sur mobile

Je faisais face au même problème lors du glisser-déposer sur un mobile avec la lib réact dnd, mais après avoir supprimé les divs de colonne de ligne de la liste et conservé uniquement la liste des cartes, cela a fonctionné pour moi sans cette erreur. Il a obtenu cette cible valide sur le navigateur mobile

J'ai eu cette idée de ton post alors merci @marcelomrtnz

J'ai le même problème. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Voici le bac à sable. faites glisser l'élément 1ba sur l'élément 1, puis l'élément 1ba vers le bas.