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。

使用 create react app 升级到 react 16 时，这里也一样。

更新：我已经在父组件中连接了HTML5Backend和DragDropContext ，确保最高级别的组件在它被设置的地方，然后升级到最新的 react 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感谢您的回答。
当拖放功能根本不起作用时，使用此解决方案会导致另一个错误。 使用这个 'react-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 时我遇到了同样的问题
就我而言，将 react-dnd 升级到v8.0.3并使用DndProvider而不是DragDropContext解决了我的问题。