React-dnd: خطأ لم يتم اكتشافه: انتهاك ثابت: من المتوقع العثور على هدف صالح.

هل يمكنك مشاركة الرمز الخاص بك؟

نعم ، من فضلك ضع الكود القابل للتشغيل في مكان ما.
قد يساعد أيضًا الكثير منكم في استخدام الإصدار على NPM لذلك سيكون من الأسهل تصحيح المشكلة.

لقد وجدت الخطأ أثناء إعداد مثال لكم يا رفاق. الكائن الذي قمت بإرجاعه في beginDrag لا يحتوي على معرّف. ربما واجهت React مشكلة في ذلك ، والتي ربما تسببت في هذا الخطأ في React-Dnd.

ممتع ، شكرا! نحن لا نفرض أي قيود فعلاً على ما يتم إرجاعه من beginDrag() طالما أنه كائن عادي ، لذا أتساءل ما هو تدفق الخطأ.

آسف للإضافة إلى سلسلة رسائل قديمة ، ولكن نظرًا لأن هذا هو المرجع الوحيد لهذا الخطأ على الإنترنت بالكامل ، فقد اعتقدت أن شخصًا ما قد يجد ما يلي مفيدًا في المستقبل.

كان لدي نفس الخطأ ، لكن المشكلة كانت أن لديّ مكونًا (مشابهًا للبطاقة في الأمثلة) تم تزيينه بكل من أغلفة السحب والإفلات.

عندما بدأ simulateBeginDrag ، أرسل الهدف _drop_ (بدلاً من مصدر السحب) إلى المدقق ، والذي فشل بشكل صحيح. كان الحل هو التعمق بمستوى واحد (مع getDecoratedComponentInstance() ) عند الحصول على معرف المعالج.

yannisbarlas البحث العظيم. واجهت نفس المشكلة بالضبط. ربما يمكن ذكر ذلك في مستندات الاختبار ؟

yannisbarlas شكرا جزيلا

فقط في حالة تعثر شخص ما في هذا الخطأ والمشكلة ، واجهت مشكلة مماثلة عند إنشاء قائمة قابلة للفرز وكل عنصر يحتوي على مفتاح يتكون من تسلسل معرفه وفهرسه في القائمة.
تم الإصلاح ببساطة عن طريق تعيين مفتاح مناسب (على سبيل المثال ، ثابت) للعنصر الذي يتم سحبه.

yannisbarlas هل لديك مثال كود للحل الخاص بك؟

آسف على الرد المتأخر damiangreen ، طار البريد الإلكتروني للإشعار مباشرة.

لقد تم إهمال الرمز (لقد مضى وقت طويل) ، ولكن يمكنك التحقق منه هنا .

إذا كان هناك شخص ما لا يزال يعمل في هذه المشكلة ، فالرجاء ملاحظة أن عنصر القائمة الذي تعينه من خلال يحتاج إلى خاصية مفتاح ثابتة . في حالتي ، كنت أقوم بإرسال إجراء Redux لتغيير العناصر الموجودة في القائمة ، ثم توفير المفتاح للعنصر المعين مثل هذا:

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

والذي يبدو أنه تسبب في حدوث الخطأ ، لأن idx يتغير بسرعة.

شكرا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> ))

بالنسبة لي ، يحدث هذا الخطأ بسبب مناطق الإسقاط التي تم إنشاؤها ديناميكيًا - عندما يتم نقل العنصر الأخير من منطقة الإسقاط ، يعيد React تصيير بدون هذه المنطقة ويبدو أن هذا يسبب الاستثناء. ربما تكون حالة سباق حيث تتم إزالة المنطقة مباشرة قبل نقل العنصر على الرغم من أن المجموعات مشتقة من نفس العناصر تتغير hmm

بالنسبة لي ، يحدث هذا الخطأ بسبب مناطق الإسقاط التي تم إنشاؤها ديناميكيًا - عندما يتم نقل العنصر الأخير من منطقة الإسقاط ، يعيد React تصيير بدون هذه المنطقة ويبدو أن هذا يسبب الاستثناء. ربما تكون حالة سباق حيث تتم إزالة المنطقة مباشرة قبل نقل العنصر على الرغم من أن المجموعات مشتقة من نفس العناصر تتغير hmm

مرحباDominicTobias
لقد قمت أيضًا بإنشاء مناطق إسقاط بشكل ديناميكي.
كيف أصلحتها؟

@ ريموند اونغ

لقد قمت أيضًا بإنشاء مناطق إسقاط بشكل ديناميكي.
كيف أصلحتها؟

بمعنى آخر ، يمكن أن تكون المشكلة أنك قمت بإنشاء مكون أصلي (المستوى الأعلى) مرة أخرى.
في هذه الحالة ، فقد رد فعل-dnd معرف (معرفه الداخلي) الذي يعمل به وخطأ في الإخراج.

في حالتي ، لقد قمت بتحديث معلمة id للكيان الأصلي عند تحديث الحالة في المخفض (نقل الأعمدة داخل الصف ، وتحديث معرف الصف عندما تغير الأعمدة أماكنها). بعد إزالة updating id functionality كل شيء يبدأ العمل بشكل صحيح.

ولدي أيضا هذه المسألة. في حالتي ، يحدث ذلك فقط عندما يعود هدف الإسقاط كاذبًا في canDrop. يمكن لأي شخص أن ينشر الحل الخاص بك لهذه المشكلة؟ ذكر أحدهم أن الأمر يتعلق بفقدان الهوية ، لكنني لست متأكدًا من مكان وضع الهوية؟

أواجه نفس المشكلة ، لقد تمكنت من تعديل مثال من المستندات ، يمكنك رؤيته هنا عن طريق السحب / الإفلات حول العنصر الأول: https://codesandbox.io/s/broken-feather-qf0f2؟file= /src/Container.jsx

لقد أنشأت أيضًا مشكلة بكل التفاصيل (ربما كان يجب علي النشر هنا للتو؟) # 2693

واجهت نفس المشكلة ، وقمت بإصلاحها على النحو التالي:

بدا الكود الخاص بي

const ParentOfCards = () => {    

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

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

}

اتضح أنه لا يمكنك وضع CardComponent داخل ParentOfCards (أعتقد أن الأمر يتعلق بإعادة التصيير) ، لذلك قمت بحلها بفصل CardComponent عن ParentOfCards نطاق

const ParentOfCards = () => {    

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


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

}

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

والآن (بعد يومين من التصحيح: ج) يعمل! 😁

marcelomrtnz شكرا جزيلا لك
لقد وفرت الكثير من وقتي في هذه المشكلة على الهاتف المحمول

كنت أواجه نفس المشكلة أثناء سحب الإسقاط على الهاتف المحمول مع رد فعل dnd lib ولكن بعد إزالة divs عمود الصف من القائمة والاحتفاظ بقائمة البطاقات فقط ، فقد نجحت معي بدون هذا الخطأ. لقد حصلت على هذا الهدف الصحيح على متصفح الجوال

لقد حصلت على هذه الفكرة من منشورك ، لذا أشكرك على

لدي نفس المشكلة. https://codesandbox.io/s/proud-wind-hklt6؟file=/src/CreateForum.jsx
هنا رمل. اسحب العنصر 1ba فوق العنصر 1 ، ثم اسحب العنصر 1ba لأسفل مرة أخرى.