<p>react-dnd는 마운트되지 않은 구성 요소를 호출하여 `Uncaught 오류: 유효한 targetId를 찾을 수 없습니다`를 일으킬 수 있습니다.</p>

버그 설명
react-dnd가 구성 요소를 마운트 해제하도록 하는 수집 함수를 호출한 다음 마운트 해제된 구성 요소에 대해 또 다른 collect() 호출을 수행하여 "올바른 targetId를 찾을 수 없음" 오류가 발생할 수 있습니다.

백엔드 드래그 앤 드롭 이벤트의 dispatch()에 대한 Redux는 처음에 구독 이벤트에 대한 모든 수신기의 복사본을 만들고 구독자에게 알리는 동안 구독 취소된 redux 구독에 관계없이 항상 호출합니다(https://stackoverflow.com/questions 참조). /43356080/redux-unsubscribe-within-componentwillunmount-still-calls-subscribe-callback). 즉, 'EndDrag' html5 드래그 이벤트와 같은 것이 react-dnd/src/decorateHandler.tsx:handleChange()의 handleChange()에서 알림을 트리거하고 첫 번째 collect() 호출로 구성 요소의 마운트 해제가 발생하면 마운트 해제된 후속 구성 요소는 동일한 이벤트의 후속 알림에서 해당 collect() 호출이 트리거될 수 있습니다.

따라서 구성 요소가 유효한 대상 ID의 레지스트리에서 유효하게 제거되었지만 알림이 마운트 해제된 구성 요소를 호출하기 때문에 불변 '유효한 대상을 찾을 것으로 예상됨'이 트리거됩니다.

react-dnd를 사용하는 react-sortable-tree를 내 앱에 통합하려고 시도하는 동안 이 문제를 발견했습니다. https://github.com/frontend-collective/react-sortable-tree/issues/490에서 문제의 예와 재현 가능한 테스트 사례를 볼 수 있습니다. dragTarget 외부에서 dragSource를 해제하여 취소되는 드래그 앤 드롭은 매번 이 문제를 재현합니다.

포착되지 않은 오류 및 스택 추적이 아래에 붙여넣어집니다. 스택 추적은 연결 함수가 마운트 해제된 구성 요소에서 실패하는 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)
핸들 변경 시(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)
``

해결 방법

마운트 해제된 구성 요소를 호출하는 것은 아마도 올바른 동작이 아닐 수 있으므로, decorHandler가 이미 구독 취소된 경우 알림을 삭제하는 if 문을 react-dnd/src/decorateHandler.tsx:handleChange에 추가했습니다. 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)