React-dnd: html5बैकएंड को दो बार सेटअप नहीं कर सकता

मुझे विश्वास है कि मैं एक ही मुद्दे में भाग रहा हूँ। नीचे त्रुटि स्टैक ट्रेस है। समस्या प्रतिक्रिया 16 में पुन: उत्पन्न होती है, लेकिन प्रतिक्रिया 15 में नहीं। यह प्रतिक्रिया-डीएनडी के गर्म पुनः लोड करने से संबंधित प्रतीत होता है।

Uncaught Error: Cannot have two HTML5 backends at the same time. at HTML5Backend.setup (HTML5Backend.js:89) at DragDropManager.handleRefCountChange (DragDropManager.js:52) at Object.dispatch (createStore.js:186) at HandlerRegistry.addTarget (HandlerRegistry.js:114) at registerTarget (registerTarget.js:9) at DragDropContainer.receiveType (decorateHandler.js:150) at DragDropContainer.receiveProps (decorateHandler.js:139) at new DragDropContainer (decorateHandler.js:106) at constructClassInstance (react-dom.development.js:9760) at updateClassComponent (react-dom.development.js:10215)

हॉट रीलोडिंग के साथ 16 रिएक्ट करने के लिए अपग्रेड करने के बाद से

प्रतिक्रिया ऐप बनाने का उपयोग करते हुए, प्रतिक्रिया 16 में अपग्रेड करते समय यहां वही।

अद्यतन: मैं पहले से ही HTML5Backend और DragDropContext को एक मूल घटक में जोड़ रहा था, यह सुनिश्चित कर रहा था कि उच्चतम स्तर घटक वह था जहां इसे स्थापित किया गया था, और फिर नवीनतम प्रतिक्रिया डीएनडी और एचटीएमएल 5 बैकएंड में अपग्रेड किया गया था , और यह मुद्दा जादुई रूप से गायब हो गया।

क्या इस समस्या का कोई समाधान/स्पष्टीकरण है?

मैं react-hot-loader , react-dnd और react-dnd-html5-backend का उपयोग कर रहा हूं। HTML5Backend को एक से अधिक बार बनने से रोकने के लिए, मैंने ड्रैगड्रॉपकॉन्टेक्स्ट को सबसे ऊपरी कंटेनर में ले जाया:

import { AppContainer } from 'react-hot-loader';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const AppContainerDnD = DragDropContext(HTML5Backend)(AppContainer);

फिर सामान्य तरीके से AppContainer के इस सजाए गए संस्करण का उपयोग करें:

render(
  <AppContainerDnD>
    <Root store={store} history={history}/>
  </AppContainerDnD>,
  document.getElementById('app')
);

if (module.hot) {
  module.hot.accept('./components/Root', () => {
    const NewRoot = require('./components/Root').default;
    render(
      <AppContainerDnD>
        <NewRoot store={store} history={history}/>
      </AppContainerDnD>,
      document.getElementById('app')
    );
  });
}

अगर कोई समस्या आती है तो वापस रिपोर्ट करना याद रखने की कोशिश करेंगे।

@ हावर्डेज धन्यवाद, कोशिश करेंगे!
मेरा वर्तमान कामकाज थोड़ा गंदा है लेकिन बहुत अच्छा काम करता है।
window.__isReactDndBackendSetUp = false;

@davidspiess कृपया मुझे बताएं, आपने इसे कैसे लागू किया?

@IvanGrodno यहाँ तुम जाओ!

import * as React from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

const App = () => <div>Your App</div>;

// Hack until this ticket is fixed https://github.com/react-dnd/react-dnd/issues/894
window.__isReactDndBackendSetUp = false;

export default DragDropContext(HTML5Backend)(App);

@davidspiess उत्तर के लिए धन्यवाद।
इस समाधान का उपयोग करना एक और बग का कारण था जब ड्रैग एंड ड्रॉप कार्यक्षमता बिल्कुल भी काम नहीं करती थी। इस 'प्रतिक्रिया-डीएनडी-माउस-बैकएंड' के बजाय 'प्रतिक्रिया-डीएनडी-एचटीएमएल 5-बैकएंड' का उपयोग करने से समस्या हल हो गई।

मेरा समाधान आपके ड्रैगड्रॉपकॉन्टेक्स्ट को कैश करना है, शायद यह मदद करता है:

import * as React from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

const App = () => <div>Your App</div>;

window.__DragDropContext = window.__DragDropContext || DragDropContext(HTML5Backend);

export default window.__DragDropContext(HTML5Backend)(App);

यह बग (मेरे लिए) केवल ड्रैगड्रॉपकॉन्टेक्स्टप्रोवाइडर के साथ होता है। ड्रैगड्रॉपकॉन्टेक्स्ट का उपयोग करने से समस्या हल हो जाती है।

हॉट रीलोडिंग/HMR . का उपयोग करते समय मेरे पास एक ही समस्या है
मेरे मामले के लिए, उन्नयन के लिए प्रतिक्रिया-DND v8.0.3 और का उपयोग कर DndProvider के बजाय DragDropContext मेरी समस्या हल।