React-dnd: لا يمكن إعداد html5backend مرتين

أعتقد أنني أواجه نفس المشكلة. يوجد أدناه تتبع مكدس الخطأ. تتكرر المشكلة في React 16 ، لكن ليس في React 15. يبدو أنها مرتبطة بإعادة التحميل السريع لـ response-dnd.

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)

نفس مشكلة sangmokh منذ الترقية للتفاعل 16 مع إعادة التحميل الساخن.

نفس الشيء هنا عند الترقية للتفاعل 16 ، باستخدام إنشاء تطبيق رد فعل.

تحديث: كنت أقوم بالفعل بتوصيل HTML5Backend و DragDropContext في مكون أصلي ، مع التأكد من أن مكون المستوى الأعلى كان في مكان إعداده ، ثم تمت ترقيته إلى أحدث عناصر رد الفعل dnd و html5 الخلفية ، واختفت هذه القضية بطريقة سحرية.

هل يوجد حل / تفسير لهذه المشكلة؟

أنا أستخدم react-hot-loader ، react-dnd و react-dnd-html5-backend . لمنع إنشاء HTML5Backend أكثر من مرة ، قمت بنقل DragDropContext إلى الحاوية العلوية:

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')
    );
  });
}

سنحاول تذكر الإبلاغ مرة أخرى إذا ظهرت أي مشكلة.

havardge شكرا ، سوف نحاول ذلك!
الحل الحالي سيئ بعض الشيء ولكنه يعمل بشكل رائع.
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 شكرا على الإجابة.
كان استخدام هذا الحل سببًا لوجود خطأ آخر عندما لم تعمل وظيفة السحب والإفلات على الإطلاق. أدى استخدام "رد فعل-dnd-ماوس-خلفية" بدلاً من "رد فعل-dnd-html5-backend" إلى حل المشكلة.

الحل الخاص بي هو تخزين DragDropContext مؤقتًا ، ربما يساعد هذا:

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);

يحدث هذا الخطأ (بالنسبة لي) فقط مع DragDropContextProvider. يؤدي استخدام DragDropContext إلى حل المشكلة.

لدي نفس المشكلة عند استخدام إعادة التحميل الساخن / HMR
بالنسبة لحالتي ، أدى ترقية رد الفعل-dnd إلى الإصدار v8.0.3 واستخدام DndProvider بدلاً من DragDropContext حل مشكلتي.