React-dnd: не могу настроить html5backend два раза

Я считаю, что столкнулся с той же проблемой. Ниже приведена трассировка стека ошибок. Проблема воспроизводится в React 16, но не в React 15. Похоже, она связана с горячей перезагрузкой 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)

Та же проблема, что и у @sangmokh с момента обновления для реакции 16 с горячей перезагрузкой.

то же самое здесь при обновлении до React 16, используя приложение create response.

обновление: я уже подключал HTML5Backend и DragDropContext в родительском компоненте, убедившись, что компонент самого высокого уровня был там, где он был настроен, а затем обновился до последней версии response dnd и html5 backend , и эта проблема волшебным образом исчезла.

есть ли какое-нибудь решение / объяснение этой проблемы?

Я использую 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 спасибо за ответ.
Использование этого решения было причиной другой ошибки, когда функция перетаскивания не работала вообще. Использование этого «response-dnd-mouse-backend» вместо «react-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
В моем случае обновление response -dnd до DndProvider вместо DragDropContext решило мою проблему.