React-dnd: tidak dapat mengatur html5backend dua kali

Saya percaya saya mengalami masalah yang sama. Di bawah ini adalah jejak tumpukan kesalahan. Masalah muncul kembali di React 16, tetapi tidak di React 15. Tampaknya terkait dengan hot reload dari 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)

Masalah yang sama dengan @sangmokh sejak memutakhirkan untuk bereaksi 16 dengan memuat ulang panas.

sama di sini saat memutakhirkan ke reaksi 16, menggunakan aplikasi buat reaksi.

perbarui: saya sudah menghubungkan HTML5Backend dan DragDropContext dalam komponen induk, memastikan komponen tingkat tertinggi adalah tempat pengaturannya, dan kemudian memutakhirkan ke reaksi dnd dan html5 backend terbaru , dan masalah ini secara ajaib menghilang.

apakah ada solusi/penjelasan untuk masalah ini?

Saya menggunakan react-hot-loader , react-dnd dan react-dnd-html5-backend . Untuk mencegah HTML5Backend dibuat lebih dari sekali, saya memindahkan DragDropContext ke wadah paling atas:

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

const AppContainerDnD = DragDropContext(HTML5Backend)(AppContainer);

Kemudian gunakan versi AppContainer yang didekorasi ini dengan cara biasa:

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

Akan mencoba mengingat untuk melaporkan kembali jika ada masalah.

@havardge terima kasih, akan mencobanya!
Solusi saya saat ini agak kotor tetapi berfungsi dengan baik.
window.__isReactDndBackendSetUp = false;

@davidspiess Tolong beri tahu saya, bagaimana Anda menerapkannya?

@IvanGrodno ini dia!

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 terima kasih atas jawabannya.
Menggunakan solusi ini adalah penyebab bug lain ketika fungsionalitas drag & drop tidak berfungsi sama sekali. Menggunakan 'react-dnd-mouse-backend' ini sebagai gantinya 'react-dnd-html5-backend' menyelesaikan masalah.

Solusi saya adalah men-cache DragDropContext Anda, mungkin ini membantu:

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

Bug ini terjadi (untuk saya) hanya dengan DragDropContextProvider. Menggunakan DragDropContext menyelesaikan masalah.

Saya memiliki masalah yang sama saat menggunakan hot reload / HMR
Untuk kasus saya, memutakhirkan react- dnd ke DndProvider alih-alih DragDropContext memecahkan masalah saya.