React-dnd: كيف يتم تصحيح الخطأ "لا يمكن استدعاء التمرير بعد الإفلات"؟

لذلك ، قمت بالتحقيق في مشكلة JS واكتشفت أنه قبل هذا الخطأ ، كان هناك خطأ تم إلقاؤه من رد الاتصال المحدد من قبل المستخدم عندما يُفترض حدوث الإسقاط ، مما قد يؤدي إلى كسر حالة الشاشة / المتجر.

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

واجهت هذه المشكلة ووجدت حلاً لحالة الاستخدام الخاصة بي الليلة الماضية.

بالنسبة للسياق ، كنت أقوم بعرض قائمة DragSources ، وإذا تم إسقاط أي من تلك التي تم إسقاطها على DropTarget ، فسيتم إزالتها من قائمة DragSources وسيتم استبدال DropTarget بمكون يعرض محتوى DragSource.

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

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

من الصعب شرح ذلك ، لكني آمل أن يساعد ذلك.

أواجه نفس تأثيرPendragonDevelopment. تبدأ قائمتي بعنصر واحد ، ثم تتم إضافة عنصر آخر إليه ، ثم يمكن إعادة ترتيبها. يمكنك إعادة ترتيب العنصرين مرة واحدة فقط قبل أن تبدأ في رؤية أخطاء Javascript ، ولا يمكنك إعادة ترتيبها مرة أخرى.

لدي هذه المسألة أيضا
لا أعرف لماذا ولكن بعد إعادة الترتيب الأولى ، أرى هذه الأخطاء

لدي نفس الخطأ هنا.

بعد أن قارن البعض بين المثال التوضيحي والمثال الخاص بي ، وجدت أنه عندما أقوم بتكرار المكونات ، أستخدم مفتاح المصفوفة لتعيين كل من المفتاح والفهرس وفي العرض التوضيحي ، قاموا فقط بتعيين الفهرس Sortable / Simple / Container.js والمفتاح ثابت.

فعلتها وعملت!

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

عندما يكون لديك مكون إنشاء وإرفاق DnD ديناميكيًا ، يجب عليك استخدام بعض المكتبات أو ربما Date.now() سيفعل ذلك لتوليد مفاتيح فريدة لكل مكون.

{this.state.rows.map(function(row, key) {
  return (<RowComponent key={row.id} index={key} id={row.id} moveRow={that.moveRow} />);
})}

row.id فريد لكل مكون

لا أفهم سبب نجاحه ، ولكن باستخدام نموذجي. id بدلاً من مفتاح عشوائي تم إنشاؤه بواسطة node-uuid's v4 إصلاحه. على الأقل لم أعد أحصل على أخطاء.

مفتاح الإصلاح لم يحل مشكلتي.
كان هذا الرمز الخاص بي

           <ContentPatch>
             {tasks.loading 
              ? <div>...loading </div>
              : this.state.containers.map((item, i) => {
                  return (
                    <TaskStage
                      key={item.id}
                      item={item}
                      tasklist={tasks.tasks}
                      onDropped={this.handleDropped}
                      onBeginningDrag={this.onBeginningDrag}
                    />
                  );
                })}
          </ContentPatch>

بعد كل إجراء يتم إسقاطه ، كنت أقوم بتعيين جميع العناصر وكنت أتلقى نفس الخطأ.
وقمت بتغيير حالتي إلى

...
{tasks.loading && tasks.tasks.length===0
 ? <div>...loading </div>
...

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

جئت عبر هذا الخطأ نفسه.

حالة الاستخدام الخاصة بي كانت:

• نفس المكون DragSource و DragTarget
• عند الهبوط ، أردت التنقل إلى طريق

تبين أن endDrag (طريقة DragSource ) حرائق بعد drop (طريقة DropTarget ). كنت أتعامل مع التنقل عبر المسار في حدود drop والذي كان يكسر حالة الشاشة.

نقل هذا المنطق إلى endDrag لإصلاحه. تضمنت إعادة البناء التحقق مما إذا كان الانخفاض قد اكتمل monitor.didDrop() ، لكنه لم يكن سيئًا للغاية.

لدي هذه المسألة أيضا. حالتي هي أن المكون هو هدف الإسقاط ومصدر السحب. لقد حاولت استخدام طريقة endDrag وحاولت استخدام الواجهة الخلفية المصححة (https://gist.github.com/nickpresta/eb5cce69d650db4c2795). لم تحل هذه المشكلة.

المكون الخاص بي:

@DropTarget<HeadColOwnProps>(TaskDndTypes.headCol, headColTargetSpec, headColTargetCollector)
@DragSource<HeadColOwnProps>(TaskDndTypes.headCol, headColSourceSpec, headColSourceCollector)
class HeadColComponent extends React.Component<any, void> {
    render() {
        const props = this.props;
        return this.props.dndConnectDropTarget(
            this.props.dndConnectDragPreview(
                <div>
                    <div className={block('panels-task__drag')({start: props.dndIsDragging})}>
                        <SortingIcon
                            label={props.label}
                            arrowIsVisible={props.sortingIsPossible}
                            direction={props.sortingDirection}
                            clickHandler={props.sortingHandler}
                        />
                        {this.props.dndConnectDragSource(
                            <span className="panels-task__drag-control">
                                <SVGIcon width={10} height={10} url={'#icon-drag-and-drop-cell'} />
                            </span>
                        )}
                    </div>
                </div>
            )
        );
    }
}

مثال على الاستخدام:

const renderHeadCellId = (): JSX.Element => {
        return (
            <TaskCellHead key="key-head-col-id" modifications={{ number: true }}>
                <HeadColComponent
                    label="#"
                    key="key-dnd-head-col-id"
                    taskColType={TaskCols.id}
                    sortingIsPossible={false}
                    taskColsOrder={taskStore.orderCols}
                    updateDragProcess={(dp: TaskColDragProcess | null) => taskStore.updateDragProcess(dp)}
                    updateOrderCols={(order: TaskCols[]) => taskStore.updateOrderCols(order)}
                    dragProcess={taskStore.dragProcess}
                />
            </TaskCellHead>
        );
    };

إعدادات الديكور:

const headColSourceSpec: DragSourceSpec<HeadColOwnProps> = {
    beginDrag(props: HeadColOwnProps): DraggedItem {
        return { sourceColType: props.taskColType };
    },
    canDrag(props: HeadColOwnProps): boolean {
        return props.taskColsOrder.length > 1;
    },
    endDrag(props: HeadColOwnProps, monitor: DragSourceMonitor): void {
        console.debug('endDrag');
        if (!monitor.didDrop()) {
            return;
        }
        console.debug('endDrag finish');
        props.updateOrderCols((monitor.getDropResult() as DroppedResult).newOrderCols);
    }
};

const headColTargetSpec: DropTargetSpec<HeadColOwnProps> = {
    drop(props: HeadColOwnProps, monitor: DropTargetMonitor): DroppedResult {
        console.debug('drop');
        return {
            newOrderCols: getNewOrder((monitor.getItem() as DraggedItem).sourceColType, props.taskColsOrder, props.dragProcess)
        };
    },
    hover(props: HeadColOwnProps, monitor: DropTargetMonitor, component: HeadColComponent): Object | void {
        if (!monitor.canDrop()) {
            return;
        }
        // ...
        props.updateDragProcess(currentDragProcess);
    },
    canDrop(props: HeadColOwnProps, monitor: DropTargetMonitor): boolean {
        return props.taskColType !== (monitor.getItem() as DraggedItem).sourceColType;
    }
};

const headColSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    dndConnectDragSource: connect.dragSource(),
    dndConnectDragPreview: connect.dragPreview(),
    dndIsDragging: monitor.isDragging()
});

const headColTargetCollector = (connect: DropTargetConnector, monitor: DropTargetMonitor) => {
    return {
        dndConnectDropTarget: connect.dropTarget(),
        dndIsOverCurrent: monitor.isOver({ shallow: true })
    };
};

لقد لاحظت أنه بعد إعادة الترتيب لم يتم استدعاء endDrag ، ولكن تم استدعاء drop . لا يتم تنفيذ هذه الأسطر:

endDrag(props: HeadColOwnProps, monitor: DragSourceMonitor): void {
        console.debug('endDrag');
        if (!monitor.didDrop()) {
            return;
        }
        console.debug('endDrag finish');
        props.updateOrderCols((monitor.getDropResult() as DroppedResult).newOrderCols);
    }

ما الخطأ الذي افعله؟ أيه أفكار؟

لقد استبدلت HTML5Backend بـ Touch Backend (https://github.com/yahoo/react-dnd-touch-backend). إنه يعمل بالنسبة لي.

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

لدي نفس المشكلة. تم استبدال هذه الحزمة بنهاية رد فعل-dnd-touch-backend ولكن هذا لا يساعد حقًا في حل المشكلة. أفضل تشغيل html5. حاول ضبط المفاتيح على جميع العناصر التي تتم طباعتها بواسطة مكرر.

كنت أتلقى نفس الخطأ. كنت أعيد تطبيق HOC على المكونات القابلة للسحب في كل تصيير ، لذا كانت دائمًا مختلفة مما يخلط بين رد الفعل.

hakunin هل قمت بحل هذا (كما أنني لم أحصل على هذا الخطأ إلا بعد حدوث خطأ آخر في وقت التشغيل).

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

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

أشكو في كل مرة أبدأ في السحب.

كانت حالتي هي أن المكون في endDrag (props ، monitor ، component) لم يتم تعريفه بعد إسقاط العنصر. كان ذلك سببًا لخطئي الأصلي الذي أدى إلى تدفق وحدة التحكم لرسائل "لا يمكن الاتصال بالمرور بعد الإفلات".

لقد تمكنت من حل هذه المشكلة بفضل هذا التعليق: https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

لقد واجهت هذا عندما تسببت في خطأ آخر غير مصحح من قبل. لا يوجد هذا الخطأ عندما لا توجد أخطاء أخرى.

في حالتي ، حدث ذلك عندما استدعيت في النهاية بعض الإجراءات / الوظائف التي تسبب الخطأ. لذا فإن الخطأ الأساسي غير المصحح جعل dnd عالقًا. يمكنك استخدام محاولة الالتقاط عند استدعاء بعض الوظائف / الإجراءات في كتلة endDrag.
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

كانت عبارة مصحح الأخطاء داخل وظيفة onDrop هي أيضًا مصدر الخطأ بالنسبة لي. إزالته يجعل الخطأ يختفي ولكن بعد ذلك أواجه صعوبة في التصحيح بدونه.

هل لديك أي فكرة عن سبب قيام المصحح بتشغيل هذا الخطأ؟

لست متأكدًا مما إذا كان الأمر مفيدًا ولكني أقوم بتشغيل تطبيق Electron.

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