React-dnd: html5backendを2回セットアップすることはできません

私は同じ問題に直面していると思います。 以下は、エラースタックトレースです。 この問題はReact16で再現されますが、React15では再現されません。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)

ホットリロードで16に反応するようにアップグレードして以来、 @ sangmokhと同じ問題。

ここで、createreactアプリを使用してreact16にアップグレードする場合も同じです。

更新：私はすでに親コンポーネントでHTML5BackendとDragDropContextしていて、最高レベルのコンポーネントがセットアップされた場所にあることを確認してから、最新のreactdndと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-html5-backend'の代わりにこの 'react-dnd-mouse-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 DndProvider使用すると、問題が解決しました。