React-dnd: ध्यान में न आया त्रुटि: अपरिवर्तनीय उल्लंघन: एक वैध लक्ष्य मिलने की उम्मीद है।

को निर्मित 17 जुल॰ 2015 · 20टिप्पणियाँ · स्रोत: react-dnd/react-dnd

मैंने वस्तुओं को उस क्रमबद्ध सूची में खींचने के लिए एक क्रमबद्ध सूची और दूसरी सूची लागू की है। ऐप उम्मीद के मुताबिक काम करता है। लेकिन जब मैं उन वस्तुओं को स्थानांतरित करने का प्रयास करता हूं जो प्रारंभ में उस क्रमबद्ध सूची में रहे हैं, तो मुझे निम्न त्रुटि मिलती है:

Uncaught Error: Invariant Violation: Expected to find a valid target
.n @ app.js:50803
t.canDropOnTarget @ app.js:50804
(anonymous function) @ app.js:50804
t.handleTopDragEnter @ app.js:50804

मुझे नहीं पता कि कहां से शुरू करना है, क्योंकि कोड मज़बूती से काम करता है और मेरे पास केवल एक छोटा संस्करण है dist/ReactDnD.min.js ।

कोई संकेत? इस त्रुटि के कारण के लिए विशिष्ट क्या हो सकता है?

स्रोत

kraftwer1

👍2

सबसे उपयोगी टिप्पणी

बस अगर कोई इस त्रुटि और मुद्दे पर ठोकर खाता है, तो मुझे एक समान समस्या थी जब एक क्रमबद्ध सूची और प्रत्येक आइटम में इसकी आईडी और सूची में इसकी अनुक्रमणिका के संयोजन से बना एक कुंजी होती है।
तत्व को घसीटे जाने के लिए एक उचित (अर्थात, सुसंगत) कुंजी सेट करके ठीक किया गया था।

mariomc 10 जून 2018

👍13 ❤2

सभी 20 टिप्पणियाँ

क्या आप अपना कोड साझा कर सकते हैं?

vkbansal 17 जुल॰ 2015

हाँ, कृपया कहीं चलने योग्य कोड डालें।
इससे आप में से बहुत से लोगों को एनपीएम पर संस्करण का उपयोग करने में मदद मिलेगी, इसलिए इस मुद्दे को डीबग करना आसान होगा।

gaearon 17 जुल॰ 2015

आप लोगों के लिए एक उदाहरण सेट करते समय मुझे त्रुटि मिली। जिस वस्तु को मैंने beginDrag में लौटाया उसमें एक आईडी नहीं थी। संभवत: रिएक्ट में इसके साथ कोई समस्या थी, जिसके कारण रिएक्ट-डीएनडी में वह त्रुटि हो सकती थी।

kraftwer1 19 जुल॰ 2015

दिलचस्प, धन्यवाद! जब तक यह एक सादा वस्तु है तब तक हम वास्तव में beginDrag() रिटर्न पर कोई प्रतिबंध नहीं लगाते हैं, इसलिए मुझे आश्चर्य है कि त्रुटि प्रवाह क्या था।

gaearon 19 जुल॰ 2015

पुराने धागे में जोड़ने के लिए खेद है, लेकिन चूंकि यह पूरे इंटरनेट पर इस त्रुटि का एकमात्र संदर्भ है, मैंने सोचा कि भविष्य में किसी को निम्नलिखित उपयोगी मिल सकता है।

मेरे पास एक ही त्रुटि थी, लेकिन मुद्दा यह था कि मेरे पास एक घटक था (उदाहरणों में कार्ड के समान) जिसे _both_ ड्रैग और ड्रॉप रैपर से सजाया गया था।

जब simulateBeginDrag शुरू हुआ, तो उसने _ड्रॉप लक्ष्य_ (ड्रैग स्रोत के बजाय) को सत्यापनकर्ता को भेजा, जो सही ढंग से विफल रहा। हैंडलर आईडी प्राप्त करते समय समाधान एक स्तर गहरा ( getDecoratedComponentInstance() ) जाना था।

yannisbarlas 25 मार्च 2016

👍15

@yannisbarlas महान खोज। मैं उसी सटीक मुद्दे में भाग गया। शायद परीक्षण दस्तावेज़ों में इसका उल्लेख हो सकता है?

zekedroid 6 जून 2016

👍2

@yannisbarlas खोजने के लिए एक टन धन्यवाद! बहुत निराशा में मेरी मदद की :)

prakhar1989 26 जून 2016

mariomc 10 जून 2018

👍13 ❤2

@yannisbarlas क्या आपके पास अपने समाधान का कोड उदाहरण है?

damiangreen 20 जून 2018

देर से प्रतिक्रिया के लिए क्षमा करें @damiangreen , अधिसूचना ईमेल मेरे ठीक पीछे से उड़ गया।

कोड को बहिष्कृत कर दिया गया है (यह कुछ समय हो गया है), लेकिन आप इसे यहां देख सकते

yannisbarlas 13 अग॰ 2018

यदि कोई अभी भी इस मुद्दे में चलता है, तो कृपया ध्यान दें कि जिस सूची का आप मानचित्रण कर रहे हैं उसके तत्व में लगातार कुंजी होना चाहिए। मेरे मामले में मैं सूची में आइटम बदलने के लिए एक Redux कार्रवाई भेज रहा था, और फिर इस तरह से मैप किए गए तत्व की कुंजी प्रदान कर रहा था:

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

जो स्पष्ट रूप से त्रुटि को सक्रिय करता है, क्योंकि idx मक्खी पर बदल रहा है।

chulanovskyi 10 फ़र॰ 2019

🎉13

धन्यवाद @chulanovskyi
मेरे लिए यह इस तरह दिखता था:
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> ))

omgoshjosh 27 अप्रैल 2019

🚀1

मेरे लिए यह त्रुटि गतिशील रूप से बनाए गए ड्रॉप क्षेत्रों के कारण होती है - जब अंतिम आइटम को ड्रॉप क्षेत्र से स्थानांतरित किया जाता है तो उस क्षेत्र के बिना प्रतिक्रिया फिर से प्रस्तुत होती है और ऐसा लगता है कि अपवाद का कारण बनता है। शायद यह एक दौड़ की स्थिति है जहां आइटम को स्थानांतरित करने से ठीक पहले क्षेत्र हटा दिया जाता है, हालांकि समूह एक ही आइटम से व्युत्पन्न होते हैं हम्म बदलते हैं

DominicTobias 5 नव॰ 2019

👍3 👀1

मेरे लिए यह त्रुटि गतिशील रूप से बनाए गए ड्रॉप क्षेत्रों के कारण होती है - जब अंतिम आइटम को ड्रॉप क्षेत्र से स्थानांतरित किया जाता है तो उस क्षेत्र के बिना प्रतिक्रिया फिर से प्रस्तुत होती है और ऐसा लगता है कि अपवाद का कारण बनता है। शायद यह एक दौड़ की स्थिति है जहां आइटम को स्थानांतरित करने से ठीक पहले क्षेत्र हटा दिया जाता है, हालांकि समूह एक ही आइटम से व्युत्पन्न होते हैं हम्म बदलते हैं

नमस्ते @DominicTobias
मेरे पास गतिशील रूप से बनाए गए ड्रॉप क्षेत्र भी हैं।
आपने यह कैसे फिक्स किया?

raymond-ong 5 दिस॰ 2019

👍2

@रेमंड-ओंग

मेरे पास गतिशील रूप से बनाए गए ड्रॉप क्षेत्र भी हैं।
आपने यह कैसे फिक्स किया?

दूसरे शब्दों में समस्या यह हो सकती है कि आपने फिर से पैरेंट (ऊपरी स्तर) घटक बनाया है।
इस मामले में प्रतिक्रिया-डीएनडी खोई हुई आईडी (उसकी आंतरिक आईडी) इसके साथ काम कर रही है और आउटपुट त्रुटि है।

मेरे मामले में यह था, कि मैंने रेड्यूसर में अद्यतन स्थिति के दौरान मूल इकाई के id पैरामीटर को अपडेट किया है (पंक्ति के भीतर कॉलम ले जाएं, और कॉलम अपने स्थान बदलते समय पंक्ति आईडी अपडेट करें)। updating id functionality को हटाने के बाद सब कुछ सही ढंग से काम करना शुरू कर देता है।

idMolotov 27 जन॰ 2020

🚀1

मेरे पास भी यह मुद्दा है। मेरे मामले में यह तब होता है जब ड्रॉप लक्ष्य कैनड्रॉप पर झूठा रिटर्न देता है। क्या कोई इस समस्या का आपका समाधान पोस्ट कर सकता है? किसी ने उल्लेख किया है कि यह लापता आईडी से संबंधित है, लेकिन मुझे यकीन नहीं है कि आईडी कहां रखी जाए?

dukoo 15 जुल॰ 2020

मुझे एक ही समस्या का सामना करना पड़ रहा है, मैं दस्तावेज़ों से एक उदाहरण को ट्विक करने में कामयाब रहा, आप इसे पहले तत्व के आसपास खींचकर/छोड़कर यहां देख सकते हैं: https://codesandbox.io/s/broken-pher-qf0f2?file= /src/Container.jsx

मैंने सभी विवरणों के साथ एक मुद्दा भी बनाया (शायद मुझे अभी यहां पोस्ट करना चाहिए था?) #2693

leftdevel 2 अग॰ 2020

मुझे भी यही समस्या थी, और मैंने इसे इस तरह ठीक किया:

मेरे कोड की तरह लग रहा था

const ParentOfCards = () => {    

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

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

}

यह पता चला है कि आप CardComponent को ParentOfCards CardComponent अंदर नहीं डाल सकते (मुझे लगता है कि इसे फिर से प्रस्तुत करने के साथ करना है), इसलिए मैंने इसे CardComponent को ParentOfCards से अलग करके हल किया

const ParentOfCards = () => {    

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


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

}

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

और अब (डिबगिंग के दो दिनों के बाद: सी) यह काम करता है! मैं

marcelomrtnz 11 अग॰ 2020

👍1

@marcelomrtnz बहुत-बहुत धन्यवाद
आपने मोबाइल पर इस मुद्दे पर मेरा बहुत समय बचाया

प्रतिक्रिया डीएनडी लिब के साथ मोबाइल पर ड्रैग ड्रॉप करते समय मुझे एक ही समस्या का सामना करना पड़ रहा था लेकिन सूची से पंक्ति कॉलम divs को हटाने और केवल कार्ड सूची रखने के बाद यह इस त्रुटि के बिना मेरे लिए काम करता था। उसे मोबाइल ब्राउज़र पर वह वैध लक्ष्य मिल गया

मुझे यह विचार आपकी पोस्ट से मिला है इसलिए धन्यवाद @marcelomrtnz

mejayantpatil 22 अग॰ 2020

😄2 🎉1

मेरे साथ भी वही दिक्कत है। https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
यहाँ सैंडबॉक्स है। आइटम 1ba को आइटम 1 पर खींचें, और फिर आइटम 1ba को फिर से नीचे खींचें।

miko1991 18 नव॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-dnd: ध्यान में न आया त्रुटि: अपरिवर्तनीय उल्लंघन: एक वैध लक्ष्य मिलने की उम्मीद है।

सबसे उपयोगी टिप्पणी

सभी 20 टिप्पणियाँ

संबंधित मुद्दों