处理不能同时有两个 HTML5 后端答案

【问题标题】：handling Cannot have two HTML5 backends at the same time处理不能同时有两个 HTML5 后端
【发布时间】：2018-08-17 09:25:02
【问题描述】：

对于下一个代码，我收到了错误：

 Uncaught Error: Cannot have two HTML5 backends at the same time.

这个错误只是因为我试图使用 Box 数组而发生。如果不是

                {this.state.services}

如果我使用

         < Box key={1} name="Glassu" />

编译错误停止

我只使用一个 html 上下文。

    import React, { Component } from 'react'
    import { DragDropContextProvider } from 'react-dnd'
    import HTML5Backend from 'react-dnd-html5-backend'
    import ChartForProjectServices from './ChartForProjectServices'
    import Box from './Box'

    export default class Container extends Component {
    constructor(props){
        super(props);
        this.state = {
            services: [],
        }

        this.getAllServices = this.getAllServices.bind(this);

    };


    getAllServices()
    {
        var services = [];
        services.push(<Box key={1} name="Glassu" />);
        services.push(<Box key={2} name="Banana" />);
        services.push(<Box key={3} name="Paper" />);
        this.setState({services: services});

    }

    componentDidMount(){
        this.getAllServices()
    }

    render() {


        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <div>
                    <div style={{ overflow: 'hidden', clear: 'both' }}>
                           <ChartForProjectServices allowedDropEffect="move" />
                    </div>
                    <div style={{ backgroundColor: 'green', overflow: 'hidden', clear: 'both' }}>
                        {this.state.services}
                    </div>
                </div>
            </DragDropContextProvider>
        )
    }
    }

注意：此代码基于发布在以下位置的 React 拖放示例：

  https://github.com/react-dnd/react-dnd/tree/master/examples/01%20Dustbin/Copy%20or%20Move

【问题讨论】：

当您尝试使用已构建的数组而不是构建一个并单独推送组件时，您的代码是什么样的？
{/* {this.state.services}*/}
在这种情况下运行

标签： javascript reactjs ecmascript-6 drag-and-drop jsx

【解决方案1】：

我几乎一直在使用 componentDidMount() 没有任何问题。但是，在这种情况下，我不得不使用

    componentWillMount(){
        this.getAllServices()
    }

现在一切正常！！

更新：我必须将拖放库的导入放置到我的项目的根目录

【讨论】：