<p>प्रतिक्रिया-डीएनडी एक अनमाउंट किए गए घटक में कॉल कर सकता है जिसके कारण `अनकॉट एरर: एक वैध लक्ष्य नहीं मिल सका`</p>

बग का वर्णन करें
प्रतिक्रिया-डीएनडी के लिए एक संग्रह फ़ंक्शन को कॉल करना संभव है जो एक घटक को अनमाउंट करने का कारण बनता है, फिर अनमाउंट किए गए घटक पर एक और संग्रह() कॉल करें, जिससे एक अनकही त्रुटि "एक वैध लक्ष्य आईडी नहीं मिल सका"।

Redux ऑन इट्स डिस्पैच () बैकएंड ड्रैग एंड ड्रॉप इवेंट्स सभी श्रोताओं को शुरुआत में सब्सक्राइब्ड इवेंट्स की एक कॉपी बनाता है और सब्सक्राइबर्स को सूचित करते समय रेडक्स सब्सक्रिप्शन को अनसब्सक्राइब किए बिना हमेशा उन्हें कॉल करता है (देखें https://stackoverflow.com/questions /४३३५६०८०/रेडक्स-अनसब्सक्राइब-इन-कंपोनेंटविलअनमाउंट-स्टिल-कॉल्स-सब्सक्राइब-कॉलबैक)। इसका मतलब यह है कि अगर 'एंडड्रैग' एचटीएमएल 5 ड्रैग इवेंट की तरह कुछ प्रतिक्रिया-डीएनडी/src/decorateHandler.tsx:handleChange() में हैंडल चेंज() में अधिसूचना ट्रिगर करता है, और पहला संग्रह() कॉल एक घटक की अनमाउंट का कारण बनता है, बाद के अनमाउंट किए गए घटक में उसी घटना की बाद की अधिसूचना में इसकी कलेक्ट () कॉल ट्रिगर हो सकती है।

इस प्रकार, अपरिवर्तनीय 'एक वैध लक्ष्य खोजने की उम्मीद' ट्रिगर हो जाती है क्योंकि घटक को वैध लक्ष्य आईडी की रजिस्ट्री से वैध रूप से हटा दिया गया है, लेकिन अधिसूचना एक अनमाउंट घटक में कॉल कर रही है।

प्रतिक्रिया-क्रमबद्ध-पेड़ को एकीकृत करने का प्रयास करते समय मैंने इस समस्या की खोज की, जो मेरे ऐप में प्रतिक्रिया-डीएनडी का उपयोग करता है। आप इस मुद्दे का एक उदाहरण और एक पुन: बनाने योग्य परीक्षण केस यहां देख सकते हैं: https://github.com/frontend-collective/react-sortable-tree/issues/490। ड्रैग टार्गेट के बाहर ड्रैगसोर्स जारी करके रद्द होने वाला ड्रैग एंड ड्रॉप हर बार इस मुद्दे को पुन: उत्पन्न करता है।

अनकैप्ड एरर और स्टैक ट्रेस नीचे चिपकाया गया है, स्टैक ट्रेस दिखाता है कि कनेक्ट फ़ंक्शन मॉनिटर में कॉल कर रहा है। कैनड्रॉप () जो अनमाउंट घटकों पर विफल रहता है।
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)
``

वैकल्पिक हल

अनमाउंट घटकों में कॉल करना शायद सही व्यवहार नहीं है, इसलिए मैंने प्रतिक्रिया-dnd/src/decorateHandler.tsx:handleChange में एक कथन जोड़ा है जो अधिसूचना को छोड़ देता है यदि सजावटहैंडलर पहले ही सदस्यता समाप्त कर चुका है। अंतर संलग्न।

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)