<p>response-dnd может вызывать отключенный компонент, вызывая `Uncaught Error: Could not find a valid targetId`</p>

Опишите ошибку
Реагирование-dnd может вызвать функцию сбора, которая приводит к отключению компонента, а затем выполнить еще один вызов функции collect () для отключенного компонента, что приведет к появлению неперехваченной ошибки «Не удалось найти действительный targetId».

Redux в его dispatch () серверных событий Drag And Drop делает копию всех слушателей для подписанных событий в начале и всегда вызывает их, независимо от того, какие подписки redux были отменены при уведомлении подписчиков (см. Https://stackoverflow.com/questions / 43356080 / redux-unsubscribe-within-componentwillunmount-still-calls-subscribe-callback). Это означает, что если что-то вроде события перетаскивания EndDrag html5 вызывает уведомление в handleChange () в response-dnd / src / decorateHandler.tsx: handleChange (), и первый вызов collect () вызывает размонтирование компонента, последующий размонтированный компонент может запускать вызов collect () при последующем уведомлении о том же событии.

Таким образом, инвариант «Ожидается найти действительную цель» срабатывает, потому что компонент действительно был удален из реестра действительных идентификаторов цели, но уведомление вызывает отключенный компонент.

Я обнаружил эту проблему, пытаясь интегрировать в мое приложение response-sortable-tree, которое использует response-dnd. Вы можете увидеть пример проблемы и воспроизводимый тестовый пример здесь: https://github.com/frontend-collective/react-sortable-tree/issues/490. Перетаскивание, которое отменяется путем освобождения dragSource за пределами dragTarget, воспроизводит эту проблему каждый раз.

Неперехваченная ошибка и трассировка стека вставлены ниже. Трассировка стека показывает, что функция подключения вызывает monitor.canDrop (), который не работает на размонтированных компонентах.
browser.js: 38 Неперехваченное инвариантное нарушение: ожидается обнаружение допустимой цели.при инварианте (https://xzoq6xprlz.codesandbox.io/node_modules/invariant/browser.js:38:15)в DragDropMonitorImpl.canDropOnTarget (https://xzoq6xprlz.codesandbox.io/node_modules/dnd-core/lib/cjs/DragDropMonitorImpl.js:67:9)
в DropTargetMonitorImpl.canDrop (https://xzoq6xprlz.codesandbox.io/node_modules/react-dnd/lib/cjs/DropTargetMonitorImpl.js:24:41)
в nodeDropTargetPropInjection (https://xzoq6xprlz.codesandbox.io/node_modules/react-sortable-tree/dist/index.cjs.js:2367:28)
в DragDropContainer.getCurrentState (https://xzoq6xprlz.codesandbox.io/node_modules/react-dnd/lib/cjs/decorateHandler.js:116:29)
в DragDropContainer._this.handleChange (https://xzoq6xprlz.codesandbox.io/node_modules/react-dnd/lib/cjs/decorateHandler.js:45:39)
в handleChange (https://xzoq6xprlz.codesandbox.io/node_modules/dnd-core/lib/cjs/DragDropMonitorImpl.js:27:21)
при отправке (https://xzoq6xprlz.codesandbox.io/node_modules/redux/lib/redux.js:220:7)
в Object.eval [как endDrag] (https://xzoq6xprlz.codesandbox.io/node_modules/dnd-core/lib/cjs/DragDropManagerImpl.js:67:21)
в HTML5Backend.handleTopDragEndCapture (https://xzoq6xprlz.codesandbox.io/node_modules/react-dnd-html5-backend/lib/cjs/HTML5Backend.js:145:31)
``

Обходной путь

Вызов несмонтированных компонентов, вероятно, является неправильным поведением, поэтому я добавил оператор if в response-dnd / src / decorateHandler.tsx: handleChange, который отбрасывает уведомление, если decorateHandler уже был отписан. diff прилагается.

diff --git a/packages/react-dnd/src/decorateHandler.tsx b/packages/react-dnd/src/decorateHandler.tsx
index 85385ec..bcd149e 100644
--- a/packages/react-dnd/src/decorateHandler.tsx
+++ b/packages/react-dnd/src/decorateHandler.tsx
@@ -159,6 +159,15 @@ export default function decorateHandler<Props, CollectedProps, ItemIdType>({
                }

                public handleChange = () => {
+                       if (this.disposable.isDisposed) {
+                               console.log("in handleChange")
+                               //because redux takes a snapshot of all subscribers to 
+                               //events when it starts dispatch, it is still possible to call into this even after 
+                               //the subscription has been unsubscribed
+                               //to prevent against calling into unmounted objects, return immediately
+
+                               return
+                       }
                        const nextState = this.getCurrentState()
                        if (!shallowEqual(nextState, this.state)) {
                                this.setState(nextState)