React-dnd: डिबग कैसे करें "ड्रॉप के बाद कॉल हॉवर नहीं कर सकते हैं"?

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

मुझे यह समस्या आ रही है - मेरी स्थिति ऐसी है कि रिएक्ट घटक ड्रॉप टारगेट और ड्रैग सोर्स दोनों है। जब मेरे पास दो घटक होते हैं, तो मैं उपरोक्त त्रुटि को फेंकने से पहले एक बार खींच कर छोड़ सकता हूं। जब मेरे पास तीन होते हैं, तो यह बिना किसी त्रुटि के काम करता है। मुझे लगता है कि यह एक घटक पर कई संदर्भों के साथ कुछ करना है?

मुझे यह समस्या थी और मैंने कल रात अपने विशेष उपयोग के मामले में वर्कअराउंड पाया।

संदर्भ के लिए, मैं ड्रैगसोर्स की एक सूची प्रस्तुत कर रहा था, और यदि उनमें से कोई ड्रापटार्ग पर गिरा तो उन्हें ड्रैगसोर्स की सूची से हटा दिया जाएगा और ड्रॉपटार्गेट को एक घटक के साथ बदल दिया जाएगा जो ड्रैगसोर्स के कंटेंट को प्रस्तुत करता है।

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

अब, यह अपवाद केवल तब हुआ जब मैं सभी श्रेणियों में आइटम रखूंगा और कम से कम एक हटा दूंगा (नहीं जब सूची पूरी नहीं थी और मैं एक को हटा दूंगा और इसे फिर से जोड़ दूंगा)। इसलिए मैं इस नतीजे पर पहुंचा कि ड्रैगसोर्स की सूची में शून्य बच्चे कभी भी नहीं हो सकते हैं (संभवतः कंटेनर तत्व गायब होने के कारण लेकिन मेरे पास इसे परीक्षण करने के लिए पर्याप्त समय नहीं था)। इसे कम करने के लिए, प्लेसमेंट पर ड्रैगसोर्स सूची से आइटम हटाने के बजाय, मैंने उनकी शैली को display: none

यह समझाना मुश्किल है, लेकिन मुझे उम्मीद है कि इससे मदद मिलेगी।

मैं @PendragonDevelopment के समान प्रभाव का अनुभव कर रहा हूं। मेरी सूची एक आइटम से शुरू होती है, इसमें एक दूसरा जोड़ा जाता है, फिर पुनर्व्यवस्थित किया जा सकता है। आप जावास्क्रिप्ट की त्रुटियों को देखना शुरू करने से पहले एक समय में केवल दो वस्तुओं को पुनर्व्यवस्थित कर सकते हैं, और आप उन्हें फिर से कभी भी पुनः व्यवस्थित नहीं कर सकते।

मेरे पास यह मुद्दा भी है
मैं नहीं जानता कि क्यों, लेकिन पहली पुनर्व्यवस्था के बाद, मैं इन त्रुटियों को देखता हूं

मुझे यहाँ वही त्रुटि मिली।

डेमो उदाहरण और खदान की तुलना करने के बाद मैंने पाया कि जब मैं घटकों को लूप करता हूं, तो मैं कुंजी और इंडेक्स दोनों को सेट करने के लिए एरे की कुंजी का उपयोग करता हूं और डेमो में वे केवल इंडेक्स सॉर्टेबल / सिंपल / कंटेनर.जेएस सेट करते हैं और कुंजी तय होती है।

यह किया और काम किया!

कुंजी को निश्चित मान होना चाहिए क्योंकि यदि सरणी संदर्भ के बाद घटक का संदर्भ नहीं है

जब आपके पास डायनामिक घटक है और डीएनडी को संलग्न करना है तो आपको कुछ लाइब्रेरी का उपयोग करना होगा या शायद Date.now() प्रत्येक घटक के लिए अद्वितीय कुंजी उत्पन्न करने के लिए करेगा।

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

row.id प्रत्येक घटक के लिए अद्वितीय है

मुझे समझ नहीं आता कि यह क्यों काम करता है, लेकिन node-uuid's v4 द्वारा उत्पन्न एक यादृच्छिक कुंजी के बजाय मेरे model.id का उपयोग करके इसे तय किया। कम से कम मुझे अब त्रुटियाँ नहीं मिल रही हैं।

फिक्सिंग कुंजी ने मेरी समस्या हल नहीं की।
यह मेरा कोड था

           <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() साथ ड्रॉप पूरा हो गया था, तो जाँच को शामिल करना, लेकिन बहुत बुरा नहीं था।

मेरा यह मुद्दा है, भी। मेरा मामला ऐसा है कि घटक ड्रॉप टारगेट और ड्रैग सोर्स दोनों है। मैंने एंडड्रैग विधि का उपयोग करने की कोशिश की है और पैच बैकेंड (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);
    }

मैं क्या गलत कर रहा हूं? कोई विचार?

मैंने टच बैकएंड (https://github.com/yahoo/react-dnd-touch-backs) से एचटीएमएल 5 बैकएंड को बदल दिया। इससे मेरा काम बनता है।

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

Im एक ही मुद्दा रहा है। इस पैकेज को प्रतिक्रिया-dnd-touch-backend के साथ बदला गया लेकिन यह वास्तव में समस्या को हल करने में मदद नहीं करता है। मैं नहीं बल्कि html5 चलाऊँगा। उन सभी तत्वों पर सेटिंग की कोशिश की जो एक पुनरावृत्तिकर्ता द्वारा मुद्रित की जा रही हैं।

मुझे वही त्रुटि मिल रही थी। मैं हर रेंडर पर ड्रैग करने योग्य घटकों पर एक एचओसी को फिर से लागू कर रहा था ताकि वे हमेशा अलग-अलग थे जो उलझन में प्रतिक्रिया-डैंड।

@ ठाकुनिन ने इसे हल किया (एक अन्य रनटाइम त्रुटि होने के बाद भी मुझे केवल यही त्रुटि मिली)।

जब से मुझे मिला है मैंने सभी DnD कोड को वापस कर दिया है और जब भी मैं घसीटना शुरू करता हूं, तब भी मुझे मिलता है। अब जब मैंने सभी कोड को एक एकल उपयोग फ़ाइल में स्थानांतरित कर दिया और इसे कॉन्फ़िगर करने योग्य बना दिया, तो शायद मैं किसी कारण से ऐसा करने में सक्षम हो सकूं। जब मैं करूंगा तब इसके बारे में यहां पोस्ट करूंगा। (मैं माउस सेटिंग btw में TouchBackend का उपयोग कर रहा हूँ)

जवाब के लिए धन्यवाद। घसीटते समय कुछ और त्रुटि होने पर मुझे केवल यह त्रुटि मिलती है - जिस बिंदु पर यह अप्राप्य लगता है। क्या आपके लिए भी ऐसा ही है?

हर बार जब मैं घसीटना शुरू करता हूं तो खान शिकायत करता है।

मेरा मामला यह था कि आइटम को गिराए जाने के बाद एंडग्रैग (प्रॉपर, मॉनिटर, कंपोनेंट) में घटक अपरिभाषित था। इसलिए यह मेरी मूल त्रुटि पैदा कर रहा था जिसके कारण "ड्रॉप के बाद कॉल हॉवर नहीं कर सकता" संदेश के कंसोल स्ट्रीम के लिए।

मैं इस मुद्दे को इस टिप्पणी के लिए धन्यवाद करने में सक्षम हूं: https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

जब मैं पहले अन्य अनचेक त्रुटि का कारण बना, तो मुझे यह मिला। कोई अन्य त्रुटि नहीं होने पर यह त्रुटि नहीं है।

मेरे मामले में यह तब हुआ जब एंडड्रैग में मैंने कुछ कार्रवाई / फ़ंक्शन को कॉल किया जो त्रुटि का कारण बनता है। तो आधारभूत अनियंत्रित त्रुटि dnd अटक गई। एंडड्रैग ब्लॉक में कुछ फ़ंक्शन / कार्रवाई को कॉल करते समय आप कोशिश कर सकते हैं।
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

ऑनड्रॉप फ़ंक्शन के अंदर एक डिबगर स्टेटमेंट भी मेरे लिए त्रुटि का स्रोत था। इसे हटाने से त्रुटि गायब हो जाती है, लेकिन फिर मैं इसके बिना हार्ड डिबगिंग कर रहा हूं।

कोई भी विचार क्यों डीबगर इस त्रुटि को ट्रिगर कर रहा है?

यह निश्चित नहीं है कि यह किसी भी हित में है, लेकिन मैं एक इलेक्ट्रॉन ऐप चला रहा हूं।

इस मुद्दे को स्वचालित रूप से बासी के रूप में चिह्नित किया गया है क्योंकि इसमें हाल की गतिविधि नहीं थी। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।