React-dnd: Kesalahan Tidak Tertangkap: Pelanggaran Invarian: Diharapkan menemukan target yang valid.

Bisakah Anda membagikan kode Anda?

Ya, tolong letakkan kode runnable di suatu tempat.
Ini juga akan membantu banyak dari Anda dapat menggunakan versi di NPM sehingga akan lebih mudah untuk men-debug masalah.

Saya menemukan kesalahan saat menyiapkan contoh untuk kalian. Objek yang saya kembalikan di beginDrag tidak berisi id. Mungkin React memiliki masalah dengan itu, yang mungkin menyebabkan kesalahan itu di React-Dnd.

Menarik, terima kasih! Kami tidak benar-benar memaksakan batasan apa pun pada apa yang dikembalikan beginDrag() selama itu adalah objek biasa jadi saya ingin tahu apa aliran kesalahannya.

Maaf telah menambahkan ke utas lama, tetapi karena ini adalah satu-satunya referensi untuk kesalahan ini di seluruh internet, saya pikir seseorang mungkin menemukan yang berikut ini berguna di masa mendatang.

Saya memiliki kesalahan yang sama, tetapi masalahnya adalah saya memiliki komponen (mirip dengan Kartu dalam contoh) yang didekorasi dengan _both_ pembungkus seret dan lepas.

Ketika simulateBeginDrag dimulai, itu mengirim _drop target_ (bukan sumber seret) ke validator, yang gagal dengan benar. Solusinya adalah masuk ke kedalaman satu level ( dengan getDecoratedComponentInstance() ) saat mendapatkan id handler.

@yannisbarlas penemuan hebat. Saya mengalami masalah yang sama persis. Mungkin ada yang menyebutkan ini di dokumen pengujian ?

@yannisbarlas Terima kasih banyak atas penemuannya! Sangat membantu saya banyak frustrasi :)

Untuk berjaga-jaga jika seseorang tersandung pada kesalahan dan masalah ini, saya memiliki masalah serupa ketika membuat daftar yang dapat diurutkan dan setiap item memiliki kunci yang terdiri dari rangkaian id dan indeksnya pada daftar.
Perbaikan hanya dilakukan dengan menyetel kunci yang tepat (yaitu, konsisten) untuk elemen yang diseret.

@yannisbarlas Apakah Anda memiliki contoh kode dari solusi Anda?

Maaf atas keterlambatan tanggapan @damiangreen , email pemberitahuan terbang melewati saya.

Kode tidak digunakan lagi (sudah lama), tetapi Anda dapat memeriksanya di sini .

Jika seseorang masih menjalankan masalah ini, harap perhatikan bahwa elemen daftar yang Anda petakan harus memiliki prop kunci tetap . Dalam kasus saya, saya mengirim tindakan Redux untuk mengubah item dalam daftar, dan kemudian memberikan kunci ke elemen yang dipetakan seperti ini:

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

yang tampaknya memicu kesalahan, karena idx berubah saat itu juga.

terima kasih @chulanovskyi
bagi saya itu tampak seperti ini:
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> ))

Bagi saya kesalahan ini disebabkan oleh area drop yang dibuat secara dinamis - ketika item terakhir dipindahkan dari area drop Bereaksi dirender ulang tanpa area itu dan ini tampaknya menyebabkan pengecualian. Mungkin itu kondisi balapan di mana area dihilangkan sebelum memindahkan item meskipun grupnya berasal dari item yang sama berubah hmm

Bagi saya kesalahan ini disebabkan oleh area drop yang dibuat secara dinamis - ketika item terakhir dipindahkan dari area drop Bereaksi dirender ulang tanpa area itu dan ini tampaknya menyebabkan pengecualian. Mungkin itu kondisi balapan di mana area dihilangkan sebelum memindahkan item meskipun grupnya berasal dari item yang sama berubah hmm

Hai @DominicTobias
Saya juga telah membuat area drop secara dinamis.
Bagaimana Anda memperbaikinya?

@raymond-ong

Saya juga telah membuat area drop secara dinamis.
Bagaimana Anda memperbaikinya?

Dengan kata lain masalahnya bisa jadi Anda telah membuat komponen induk (tingkat atas) lagi.
Dalam hal ini react-dnd lost id (id batinnya) yang berfungsi dan menghasilkan kesalahan.

Dalam kasus saya, saya telah memperbarui parameter id dari entitas induk saat memperbarui status di peredam (memindahkan kolom di dalam baris, dan memperbarui id baris ketika kolom mengubah tempatnya). Setelah menghapus updating id functionality semuanya mulai bekerja dengan benar.

Saya juga memiliki masalah ini. Dalam kasus saya itu hanya terjadi ketika target drop mengembalikan false di canDrop. Adakah yang bisa memposting solusi Anda untuk masalah ini? Seseorang menyebutkan bahwa ini terkait dengan ID yang hilang, tetapi saya tidak yakin di mana harus meletakkan id?

Saya menghadapi masalah yang sama, saya berhasil mengubah contoh dari dokumen, Anda dapat melihatnya di sini dengan menyeret/menjatuhkan elemen pertama: https://codesandbox.io/s/broken-feather-qf0f2? /src/Container.jsx

Saya juga membuat masalah dengan semua detailnya (mungkin saya seharusnya memposting di sini?) #2693

Saya memiliki masalah yang sama, dan saya memperbaikinya seperti ini:

kode saya terlihat seperti

const ParentOfCards = () => {    

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

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

}

ternyata Anda tidak dapat memasukkan CardComponent dalam ParentOfCards ( saya pikir itu ada hubungannya dengan re-renders ), jadi saya menyelesaikannya dengan memisahkan CardComponent dari ParentOfCards lingkup

const ParentOfCards = () => {    

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


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

}

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

Dan sekarang ( setelah dua hari debugging :c ) berhasil! 😁

@marcelomrtnz Terima kasih banyak
Anda menghemat banyak waktu saya untuk masalah ini di ponsel

Saya menghadapi masalah yang sama saat menyeret drop di ponsel dengan react dnd lib tetapi setelah menghapus div kolom baris dari daftar dan hanya menyimpan daftar kartu, itu berfungsi untuk saya tanpa kesalahan ini. Itu mendapat target yang valid di browser seluler

Saya mendapat ide ini dari posting Anda jadi terima kasih @marcelomrtnz

Saya memiliki masalah yang sama. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Ini kotak pasir. seret item 1ba ke atas item 1, lalu item 1ba ke bawah lagi.