React-dnd: impossible de configurer html5backend deux fois

Je crois que je rencontre le même problème. Vous trouverez ci-dessous la trace de la pile d'erreurs. Le problème se reproduit dans React 16, mais pas dans React 15. Il semble lié au rechargement à chaud de react-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)

Même problème que @sangmokh depuis la mise à jour pour réagir 16 avec rechargement à chaud.

même chose ici lors de la mise à niveau pour réagir 16, en utilisant l'application de création de réaction.

mise à jour : je connectais déjà le HTML5Backend et le DragDropContext dans un composant parent, en m'assurant que le composant de niveau le plus élevé était là où il était configuré, puis mis à niveau vers le dernier backend React dnd et html5 , et ce problème a disparu comme par magie.

existe-t-il une solution/une explication à ce problème ?

J'utilise react-hot-loader , react-dnd et react-dnd-html5-backend . Pour empêcher le HTML5Backend d'être créé plus d'une fois, j'ai déplacé le DragDropContext jusqu'au conteneur le plus haut :

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

const AppContainerDnD = DragDropContext(HTML5Backend)(AppContainer);

Ensuite, utilisez cette version décorée de l'AppContainer de la manière habituelle :

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

J'essaierai de me rappeler de faire rapport si un problème survient.

@havardge merci, je vais essayer ça !
Ma solution de contournement actuelle est un peu sale mais fonctionne très bien.
window.__isReactDndBackendSetUp = false;

@davidspiess Dites-moi s'il vous plaît, comment vous l'avez appliqué ?

@IvanGrodno et voilà !

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 merci pour la réponse.
L'utilisation de cette solution était la cause d'un autre bogue lorsque la fonctionnalité glisser-déposer ne fonctionnait pas du tout. L'utilisation de ce 'react-dnd-mouse-backend' à la place de 'react-dnd-html5-backend' a résolu le problème.

Ma solution est de mettre en cache votre DragDropContext, peut-être que cela aide :

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

Ce bogue se produit (pour moi) uniquement avec DragDropContextProvider. L'utilisation de DragDropContext résout le problème.

J'ai le même problème lors de l'utilisation du rechargement à chaud / HMR
Dans mon cas, la mise à niveau de react -dnd vers la DndProvider au lieu de DragDropContext résolu mon problème.