React-dnd: Nicht abgefangener Fehler: Unveränderlicher Verstoß: Es wird erwartet, dass ein gültiges Ziel gefunden wird.

Kannst du deinen Code teilen?

Ja, bitte füge den ausführbaren Code irgendwo ein.
Es würde vielen von Ihnen auch helfen, die Version auf NPM zu verwenden, damit das Problem einfacher behoben werden kann.

Ich habe den Fehler beim Einrichten eines Beispiels für euch gefunden. Das Objekt, das ich in beginDrag habe, enthielt keine ID. Wahrscheinlich hatte React damit ein Problem, das diesen Fehler in React-Dnd verursacht haben könnte.

Interessant, danke! Wir erlegen keine Einschränkungen für die Rückgabe von beginDrag() auf, solange es sich um ein einfaches Objekt handelt, also frage ich mich, was der Fehlerfluss war.

Entschuldigung für das Hinzufügen zu einem alten Thread, aber da dies der einzige Hinweis auf diesen Fehler im gesamten Internet ist, dachte ich, dass jemand Folgendes in Zukunft nützlich finden könnte.

Ich hatte den gleichen Fehler, aber das Problem war, dass ich eine Komponente hatte (ähnlich wie Card in den Beispielen), die mit _beiden_ Drag-and-Drop-Wrappern dekoriert war.

Als simulateBeginDrag begann, schickte es das _Drop-Ziel_ (anstelle der Drag-Quelle) an den Validator, was korrekterweise fehlschlug. Die Lösung bestand darin, beim Abrufen der Handler-ID eine Ebene tiefer zu gehen (mit getDecoratedComponentInstance() ).

@yannisbarlas toller Fund. Ich bin genau auf das gleiche Problem gestoßen. Vielleicht kann dies in den Testdokumenten erwähnt werden ?

@yannisbarlas Vielen Dank für den Fund! Hat mir sehr geholfen, viel Frustration :)

Nur für den Fall, dass jemand über diesen Fehler und dieses Problem stolpert, hatte ich ein ähnliches Problem beim Erstellen einer sortierbaren Liste und jedes Element hatte einen Schlüssel, der sich aus der Verkettung seiner ID und seines Indexes auf der Liste zusammensetzte.
Der Fix wurde einfach durch das Setzen eines richtigen (dh konsistenten) Schlüssels für das gezogene Element durchgeführt.

@yannisbarlas Haben Sie ein Codebeispiel für Ihre Lösung?

Entschuldigung für die späte Antwort @damiangreen , die Benachrichtigungs-E-Mail ist direkt an mir vorbeigeflogen.

Der Code ist veraltet (es ist schon eine Weile her), aber Sie können ihn hier überprüfen.

Wenn dieses Problem immer noch von jemandem ausgeführt wird, beachten Sie bitte, dass das Element der Liste, nach der Sie zuordnen, eine dauerhafte Schlüsseleigenschaft haben muss. In meinem Fall habe ich eine Redux-Aktion gesendet, um die Elemente in der Liste zu ändern, und dann den Schlüssel für das zugeordnete Element wie folgt bereitgestellt:

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

was anscheinend den Fehler auslöst, weil sich idx im laufenden Betrieb ändert.

danke @chulanovskyi
bei mir sah es so aus:
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> ))

Bei mir wird dieser Fehler durch dynamisch erstellte Drop-Bereiche verursacht - wenn das letzte Element aus einem Drop-Bereich verschoben wird, rendert React erneut ohne diesen Bereich und dies scheint die Ausnahme zu verursachen. Vielleicht ist es eine Racebedingung, bei der der Bereich kurz vor dem Verschieben des Gegenstands entfernt wird, obwohl die Gruppen von den gleichen Gegenständen abgeleitet sind, ändern Sie hmm

Bei mir wird dieser Fehler durch dynamisch erstellte Drop-Bereiche verursacht - wenn das letzte Element aus einem Drop-Bereich verschoben wird, rendert React erneut ohne diesen Bereich und dies scheint die Ausnahme zu verursachen. Vielleicht ist es eine Racebedingung, bei der der Bereich kurz vor dem Verschieben des Gegenstands entfernt wird, obwohl die Gruppen von den gleichen Gegenständen abgeleitet sind, ändern Sie hmm

Hallo @DominicTobias
Ich habe auch dynamisch erstellte Drop-Areas.
Wie hast du es behoben?

@raymond-ong

Ich habe auch dynamisch erstellte Drop-Areas.
Wie hast du es behoben?

Mit anderen Worten, das Problem kann darin bestehen, dass Sie die übergeordnete Komponente (obere Ebene) erneut erstellt haben.
In diesem Fall reagiere und verlor die ID (seine innere ID) es hat einen Arbeits- und Ausgabefehler.

In meinem Fall habe ich den Parameter id der übergeordneten Entität aktualisiert, wenn der Status im Reducer aktualisiert wurde (Spalten innerhalb der Zeile verschieben und Zeilen-ID aktualisieren, wenn Spalten ihre Position ändern). Nachdem updating id functionality funktioniert alles richtig.

Ich habe auch dieses Problem. In meinem Fall passiert es nur, wenn drop target bei canDrop false zurückgibt. Kann jemand deine Lösung für dieses Problem posten? Jemand hat erwähnt, dass es mit der fehlenden ID zusammenhängt, aber ich bin mir nicht sicher, wo ich die ID einfügen soll?

Ich stehe vor dem gleichen Problem, ich habe es geschafft, ein Beispiel aus den Dokumenten zu optimieren. Sie können es hier sehen, indem Sie das erste Element ziehen / ablegen: https://codesandbox.io/s/broken-feather-qf0f2?file= /src/Container.jsx

Ich habe auch ein Issue mit allen Details erstellt (vielleicht hätte ich einfach hier posten sollen?) #2693

Ich hatte das gleiche Problem und habe es wie folgt behoben:

mein Code sah aus wie

const ParentOfCards = () => {    

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

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

}

Es stellte sich heraus, dass Sie CardComponent in ParentOfCards (ich denke, es hat mit erneuten Renderings zu tun), also habe ich es gelöst, indem ich CardComponent von den ParentOfCards trennte

const ParentOfCards = () => {    

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


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

}

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

Und jetzt (nach zwei Tagen Debugging :c) funktioniert es! 😁

@marcelomrtnz Vielen Dank
Sie haben mir viel Zeit zu diesem Thema auf dem Handy gespart

Ich hatte das gleiche Problem beim Drag Drop auf dem Handy mit React dnd lib, aber nachdem ich Zeilenspalten-Divs aus der Liste entfernt und nur die Kartenliste beibehalten hatte, funktionierte es für mich ohne diesen Fehler. Es hat dieses gültige Ziel im mobilen Browser erreicht

Diese Idee habe ich aus deinem Beitrag, also danke @marcelomrtnz

Ich habe das gleiche Problem. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Hier ist Sandkasten. Ziehen Sie Element 1ba über Element 1 und dann Element 1ba wieder nach unten.