React-dnd: تحذير باستخدام DragSource المتداخل

: +1:

هل يمكنك تقديم مشروع يعيد إنتاج المشكلة؟

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

إليك إعادة شراء صغيرة تعرض السلوك الموصوف: https://github.com/ebakan/react-dnd-nested-bug

من الغريب أن Component يلقي هذا الخطأ فقط عندما يستمع لـ monitor.getItem() . إذا كانت تستمع مقابل monitor.isDragging() فستعمل بشكل صحيح ، كما هو موضح في هذا الفرع: https://github.com/ebakan/react-dnd-nested-bug/tree/no-error-with-is- سحب

سيؤدي أيضًا إلى ظهور الخطأ عند الاستماع إلى monitor.getItemType() : https://github.com/ebakan/react-dnd-nested-bug/tree/error-with-get-item-type

ebakan - مثيرة للاهتمام. أنا أتساءل عن سبب ظهور هذا الخطأ في الكود الخاص بي ، والذي يستخدمه هو السحب. أنا أفعل بعض الأشياء المتزعزعة باستخدام السحب المتداخل ، لذلك قد يكون مظهرًا من مظاهر نفس الخطأ الذي تراه. شكرا للمساعدة في التكاثر!

لدي أدوات سحب متداخلة أيضًا ، لكن لست متأكدًا مما إذا كانت هذه هي المشكلة.
يبدو أنه يتم إنشاء متجر جديد والرمز الذي يستمع إليه. لقد صنعت مقطع فيديو إذا كان ذلك يساعد:
http://screencast.com/t/qCrJRPAS2MYR

تحديث: وجدت المشكلة ، كان لدي مستمع متبقي ، لذا في حالتي لم يكن ذلك بسبب رد الفعل.
تحديث 2: لقد تحدثت في وقت مبكر جدا. عند إزالة المستمع المتبقي ، ما زلت أتلقى التحذير.

لقد أضفت للتو Dnd إلى مكون آخر ولاحظت هذه المشكلة حتى بدون مكونات سحب متداخلة أو متعددة.

بعد قليل من البحث ، وجدت أن المشكلة مرتبطة بطبقة سحب مخصصة تعرض المكون أثناء سحبه.

إذا وضعت نصًا بدلاً من ذلك ، فإن المكون الذي يتم سحبه يعمل بشكل جيد. المكون نفسه هو مصدر السحب.

jchristmanhakunin ليس لدي أدوات سحب متداخلة ، لكنني واجهت Cannot update during an existing state transition عندما كان لدي هدف إسقاط تم عرضه بشكل مشروط بناءً على isDragging . هل يمكن أن يكون هذا هو الحال في أي من الأمثلة الخاصة بك؟ شيء من هذا القبيل:

render() {
    var dropZone;
    if (this.props.isDragging) dropZone = <MyDropTarget />;
    return <div>
       <MyDragSource />
       {dropZone}
    </div>
}

انتهى الأمر بالعمل حوله باستخدام display: none/block لإخفاء الهدف بدلاً من إضافة المكون وإزالته عندما يكون السحب نشطًا.

أعتقد أن هذا يمكن أن يكون هو المشكلة. سوف أتحقق وأعلمك. هذا بالتأكيد هو البناء الذي أستخدمه الآن.

ناو - تظهر لي المشكلة عند حدوث "السقوط". ثم يحاول عرض المكون ويرمي هذا التحذير.

تلقيت نفس التحذير عندما كانت معاينة السحب الخاصة بي مكونًا كان DragSource (والذي لا يفترض أن أقوم به).

jchristman هل سبق لك أن توصلت إلى حل لهذا؟

أنا أعمل مع مصادر السحب المتداخلة وبدأت فجأة أرى هذا الخطأ عند إسقاط المورد المتداخل.

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

تلقيت نفس التحذير عندما كانت معاينة السحب الخاصة بي مكونًا كان DragSource (والذي لا يفترض أن أقوم به).

شكرًا arjunu ، لقد تسبب هذا في تحذيري!
ما زلت أمتلك هذه من حين لآخر ، لذا أعتقد أن هناك سببًا آخر يجب إصلاحه أيضًا. قد يكون من جانبي :)

@ gharwood1 ، أنا فقط أتعامل مع المشكلة حتى يمكن إصلاحها. لقد أمضيت بضع ساعات مرة في محاولة لفهم هذه المكتبة حقًا حتى أتمكن من طلب الإصلاح ، لكنها معقدة جدًا ، لذلك انتقلت. ليس لدي الوقت فقط ... :-(

gaearon ليس لدي مشروع تم إنشاؤه بحيث يكون قادرًا على هدم شخص ما ، ولكن أعتقد أنه يمكنني الحصول على مشروع إذا لزم الأمر.

في الأساس ، ما أحاول القيام به هنا صالح:

https://github.com/arackaf/booklist/blob/react-dnd-bug-freeze/react-redux/modules/subjects/components/subjectsList-es6.js

إذا قمت بتعطيل الشرط في السطر 64 كل شيء على ما يرام

if (this.props.draggingSubject){
    effectiveChildren.push(this.props.draggingSubject);
}

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

ألا يجب أن أفعل هذا؟

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

حسنًا ، يبدو أنه لا بأس إذا احتفظت بتغييراتي المحلية إلى SubjectDisplayContent ، لكن التحذيرات تبدأ في الظهور إذا امتدت التغييرات إلى SubjectDisplay لذلك ، في الأساس ، إذا أرسل DropTarget الدعائم التي تعدل هدف dropTarget مختلفًا ، فإن رد فعل dnd يتضايق. هل هذا متوقع ، وأحتاج إلى إعادة التفكير في بعض الأشياء ، أم أن هذا خطأ في dnd؟

أواجه نفس المشكلة بالضبط. ما يمكنك القيام به في بعض المواقف هو إنشاء DragDropContext حول كل قابل للسحب متداخلة. لكن هذا لا يعمل بمجرد أن تريد DragLayer مخصص ..

لقد حصلت على نفس الخطأ ، إلا أنني أقوم بعمل إسقاط متداخل لأهداف.
بعد البحث في الوثائق ، حاولت استخدام

isOver (خيارات): إرجاع صحيح إذا كانت هناك عملية سحب قيد التقدم ، ويحوم المؤشر حاليًا فوق المالك. يمكنك اختياريًا تمرير {الضحالة: صحيح} للتحقق بدقة مما إذا كان يتم تحريك الماوس فقط على المالك ، بدلاً من الهدف المتداخل.

(مع الخيار الضحل هو صحيح) في وظيفة canDrop في هدف DropTarget الأصلي ، واختفت المشكلة. أعتقد أنه يمكن تطبيق نفس الشيء على بعض السيناريوهات الأخرى.

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

FWIW: لدي مصادر سحب متداخلة وطبقة سحب مخصصة. عندما أقوم بإزالة طبقة السحب المخصصة ، تختفي الرسالة. من فحص تتبع المكدس ، يبدو أن المشكلة هنا:

printWarning    @   warning.js?8a56:36
warning @   warning.js?8a56:60
getInternalInstanceReadyForUpdate   @   ReactUpdateQueue.js?6531:54
enqueueSetState @   ReactUpdateQueue.js?6531:200
ReactComponent.setState @   ReactComponent.js?702a:63
handleChange    @   DragLayer.js?1cbc:124 <--------------
handleChange    @   DragDropMonitor.js?0588:60

الكود ذو الصلة هنا . سأبحث في سبب اختلاف الحالة في حالتي لبدء إعادة التصيير ...

مع Dragsource + droptarget متداخلة داخل droptarget ، أحصل على هذه المشكلة.

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

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

قمت في النهاية بتقسيم المكون الخاص بي إلى إصدار "قابل للسحب" يغلف المكون الأساسي ، ثم استخدم المكون الأساسي في طبقة السحب المخصصة الخاصة بي. لا مزيد من التحذير ، كود أفضل! 👍

davidjoy woah ، شكرًا على المشاركة! أنا أفعل نفس الشيء ، أحتاج إلى تجربته أيضًا!

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

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