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)

핫 리로딩으로 반응 16으로 업그레이드한 이후로 @sangmokh 와 동일한 문제입니다.

반응 앱 만들기를 사용하여 반응 16으로 업그레이드할 때도 동일합니다.

업데이트: 이미 상위 구성 요소에서 HTML5Backend 및 DragDropContext 를 연결하고 최상위 구성 요소가 설정된 위치에 있는지 확인한 다음 최신 반응 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;

@davidspies 어떻게 적용

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

@davidspies 답변 감사합니다.
이 솔루션을 사용하면 끌어서 놓기 기능이 전혀 작동하지 않을 때 또 다른 버그가 발생했습니다. 이 '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을 사용할 때도 동일한 문제가 있습니다.
내 경우를 들어, 업그레이드에-DND 반응 v8.0.3 및 사용 DndProvider 대신 DragDropContext 내 문제를 해결했다.