React-dnd: Bagaimana cara men-debug "Tidak dapat memanggil hover setelah jatuh"?

Jadi menyelidiki masalah JS, saya menemukan bahwa sebelum kesalahan ini, ada kesalahan yang dilemparkan dari panggilan balik yang ditentukan pengguna ketika penurunan seharusnya terjadi, yang kemudian dapat merusak status monitor / penyimpanan.

Saya mengalami masalah ini juga - situasi saya sedemikian rupa sehingga komponen React adalah target drop dan sumber drag. Ketika saya memiliki dua komponen, saya dapat menarik dan melepas sekali sebelum memunculkan kesalahan di atas. Ketika saya memiliki tiga, itu bekerja tanpa kesalahan. Saya menganggap itu ada hubungannya dengan beberapa konteks pada satu komponen?

Saya mengalami masalah ini dan saya menemukan solusi untuk kasus penggunaan khusus saya tadi malam.

Untuk konteksnya, saya sedang merender daftar DragSources, dan jika ada yang jatuh ke DropTarget, mereka akan dihapus dari daftar DragSources dan DropTarget akan diganti dengan komponen yang menampilkan konten DragSource.

Bagian penting dari fungsionalitas seret dan lepas ini (Ini adalah komponen untuk mencocokkan 'kategori' dengan item) adalah fitur untuk menambahkan item kembali ke daftar DragSource, yang hanya akan mengganti item yang ditempatkan dengan DragSource dan menambahkannya kembali ke DragSources daftar.

Sekarang, pengecualian ini hanya terjadi ketika saya menempatkan item di semua kategori dan menghapus setidaknya satu (bukan ketika daftar tidak penuh dan saya akan menghapus satu dan menambahkannya kembali). Jadi saya sampai pada kesimpulan bahwa daftar DragSources tidak akan pernah memiliki nol anak untuk hal ini terjadi (mungkin karena elemen kontainer menghilang tetapi saya tidak punya cukup waktu untuk menguji ini). Untuk mengurangi ini, alih-alih menghapus item dari daftar DragSources pada penempatan, saya hanya mengatur gayanya ke display: none

Ini sulit untuk dijelaskan, tapi saya harap ini membantu.

Saya mengalami efek yang sama seperti @PendragonDevelopment. Daftar saya dimulai dengan satu item, ditambahkan ke item kedua, lalu dapat diatur ulang. Anda hanya dapat mengatur ulang dua item satu kali sebelum Anda mulai melihat kesalahan Javascript, dan Anda tidak dapat mengatur ulang mereka lagi.

Saya memiliki masalah ini juga
Saya tidak tahu mengapa tetapi setelah pengaturan ulang pertama kali, saya melihat kesalahan ini

Saya mendapat kesalahan yang sama di sini.

Setelah beberapa membandingkan contoh demo dan saya, saya menemukan bahwa ketika saya mengulang Komponen saya menggunakan kunci array untuk mengatur komponen baik kunci dan indeks dan dalam demo mereka hanya mengatur indeks Sortable / Simple / Container.js dan kuncinya diperbaiki.

Berhasil dan berhasil!

Kunci harus bernilai tetap karena jika bukan referensi ke komponen dilepaskan setelah susunan ulang array.

Ketika Anda memiliki komponen secara dinamis membuat dan melampirkan DnD Anda harus menggunakan beberapa perpustakaan atau mungkin Date.now() akan melakukannya untuk menghasilkan kunci unik untuk setiap komponen.

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

row.id unik untuk setiap komponen

Saya tidak mengerti mengapa ini berhasil, tetapi menggunakan model.id saya alih-alih kunci acak yang dihasilkan oleh node-uuid's v4 memperbaikinya. Setidaknya saya tidak mendapatkan kesalahan lagi.

Memperbaiki kunci tidak menyelesaikan masalah saya.
Ini adalah kode saya

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

Setelah setiap tindakan yang dijatuhkan, saya memetakan semua item dan saya mendapatkan kesalahan yang sama.
Dan saya mengubah kondisi saya menjadi

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

dan itu terpecahkan. Saya pikir, sekali lagi pemasangan adalah alasan kesalahan ini.

Saya menemukan kesalahan yang sama ini.

Kasus penggunaan saya adalah:

• Komponen DragSource dan DragTarget
• Saat turun, saya ingin menavigasi ke sebuah rute

Ternyata endDrag ( DragSource metode) diaktifkan setelah drop ( DropTarget metode). Saya menangani navigasi rute dalam drop yang melanggar status monitor.

Memindahkan logika itu ke endDrag untuk memperbaikinya. Refactoring termasuk memeriksa apakah drop telah selesai dengan monitor.didDrop() , tapi tidak terlalu buruk.

Saya memiliki masalah ini juga. Kasus saya sedemikian rupa sehingga komponennya adalah target drop dan sumber drag. Saya telah mencoba menggunakan metode endDrag dan mencoba menggunakan backend yang ditambal (https://gist.github.com/nickpresta/eb5cce69d650db4c2795). Itu tidak menyelesaikan masalah ini.

komponen saya:

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

Contoh penggunaan:

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

Pengaturan dekorator:

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

Saya perhatikan bahwa setelah pengaturan ulang endDrag tidak dipanggil, tetapi drop dipanggil. Baris-baris ini tidak pernah dieksekusi:

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

Apa yang saya lakukan salah? Ada ide?

Saya mengganti HTML5Backend to Touch Backend (https://github.com/yahoo/react-dnd-touch-backend). Ini bekerja untuk saya.

Bagi saya, saya mendapatkan kesalahan ini hanya karena titik putusnya disetel di callback saat drop. Yang menarik adalah itu akan gagal bahkan setelah semua breakpoint dilanjutkan dan browser tidak dihentikan sementara. Segera setelah saya menghapus breakpoint, kesalahan saat pergi.

Saya mengalami masalah yang sama. Mengganti paket ini dengan react-dnd-touch-backend tetapi itu tidak benar-benar membantu menyelesaikan masalah. Saya lebih suka menjalankan html5. Mencoba mengatur kunci pada semua elemen yang sedang dicetak oleh iterator.

Saya mendapatkan kesalahan yang sama. Saya menerapkan ulang HOC pada komponen yang dapat diseret pada setiap render sehingga mereka selalu berbeda yang membingungkan react-dnd.

@ Hakunin apakah Anda menyelesaikan ini (saya juga hanya mendapatkan kesalahan ini setelah kesalahan runtime lain terjadi).

Sejak saat itu saya telah merefaktor ulang semua kode DnD yang saya miliki dan saya masih mendapatkannya ketika saya mulai menyeret. Sekarang saya memindahkan semua kode ke dalam satu file util dan membuatnya dapat dikonfigurasi, saya mungkin akhirnya dapat menemukan alasan hal itu terjadi di beberapa titik. Akan memposting tentang itu di sini ketika saya melakukannya. (Saya menggunakan TouchBackend dalam pengaturan mouse btw)

Terima kasih atas tanggapannya. Saya hanya mendapatkan kesalahan ini setelah beberapa kesalahan lain terjadi saat menyeret - pada titik mana tampaknya tidak dapat dipulihkan. apakah itu sama untukmu?

Punyaku mengeluh setiap kali aku mulai menyeret.

Kasus saya adalah bahwa komponen di endDrag (props, monitor, komponen) tidak ditentukan setelah item dijatuhkan. Jadi itu menyebabkan kesalahan asli saya yang menyebabkan aliran konsol pesan "Tidak dapat memanggil hover setelah drop".

Saya dapat menyelesaikan masalah ini berkat komentar ini: https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

Saya bertemu ini ketika saya menyebabkan kesalahan tidak tertambal lainnya sebelumnya. tidak ada kesalahan ini ketika tidak ada kesalahan lain.

Dalam kasus saya itu terjadi ketika di endDrag saya memanggil beberapa tindakan / fungsi yang menyebabkan kesalahan. Jadi pada dasarnya kesalahan yang tidak tertambal membuat dnd macet. Anda dapat menggunakan coba tangkap saat memanggil beberapa fungsi / tindakan di blok endDrag.
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

Pernyataan debugger di dalam fungsi onDrop juga merupakan sumber kesalahan bagi saya. Menghapusnya membuat kesalahan hilang tetapi kemudian saya mengalami kesulitan debugging tanpa itu.

Tahu mengapa debugger memicu kesalahan ini?

Tidak yakin apakah itu menarik tetapi saya menjalankan aplikasi Electron.

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.