React-dnd: kann html5backend nicht zweimal einrichten

Ich glaube, ich stoße auf das gleiche Problem. Unten ist der Fehler-Stack-Trace. Das Problem reproduziert sich in React 16, aber nicht in React 15. Es scheint mit dem heißen Nachladen von React-dnd zusammenzuhängen.

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)

Gleiches Problem wie bei @sangmokh seit dem Upgrade, um 16 mit heißem Nachladen zu reagieren.

Gleiches hier beim Upgrade auf React 16 mit der Create React App.

Update: Ich habe bereits HTML5Backend und DragDropContext in einer übergeordneten Komponente verbunden, um sicherzustellen, dass die Komponente auf der höchsten Ebene dort eingerichtet wurde, wo sie eingerichtet wurde, und dann auf das neueste von React Dnd und HTML5-Backend aktualisiert , und dieses Problem verschwand auf magische Weise.

Gibt es eine Lösung/Erklärung für dieses Problem?

Ich verwende react-hot-loader , react-dnd und react-dnd-html5-backend . Um zu verhindern, dass das HTML5Backend mehrfach erstellt wird, habe ich den DragDropContext ganz in den obersten Container verschoben:

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

const AppContainerDnD = DragDropContext(HTML5Backend)(AppContainer);

Verwenden Sie dann diese dekorierte Version des AppContainers wie gewohnt:

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

Werde versuchen, mich daran zu erinnern, sich zu melden, wenn ein Problem auftritt.

@havardge danke, werde das versuchen!
Meine aktuelle Problemumgehung ist ein bisschen schmutzig, funktioniert aber großartig.
window.__isReactDndBackendSetUp = false;

@davidspiess Sag mir bitte, wie du es angewendet hast?

@IvanGrodno , los geht's!

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 danke für die Antwort.
Die Verwendung dieser Lösung war eine Ursache für einen weiteren Fehler, bei dem die Drag & Drop-Funktionalität überhaupt nicht funktionierte. Die Verwendung dieses 'react-dnd-mouse-backend' anstelle von 'react-dnd-html5-backend' löste das Problem.

Meine Lösung besteht darin, Ihren DragDropContext zwischenzuspeichern, vielleicht hilft das:

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

Dieser Fehler tritt (bei mir) nur bei DragDropContextProvider auf. Die Verwendung von DragDropContext behebt das Problem.

Ich habe das gleiche Problem beim Verwenden von Hot Reloading / HMR
In meinem Fall hat das Upgrade von React -dnd auf DndProvider anstelle von DragDropContext mein Problem gelöst.