获取：未捕获的不变违规：

Question

我正在使用react构建PWA。 我正在使用webpack捆绑我的js。 这是我的index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import LoadBody from 'components/App';

history.pushState("ecommerce", "ecommerce", "#ecommerce");
ReactDOM.render(<LoadBody page_id="ecommerce"/>,document.getElementById('content'));

这是写在LoadBody中的：

    var LoadBody = React.createClass({

    getInitialState: function() {
            return {data: []};
    },

    getInitialState: function() {
        return {value: []};
    },

    onUpdate: function(val){
        this.setState({value: val});
    },

    render: function() {


        var style = {
            display: 'none',
        };



        if (this.props.page_id=="searchdealpage"){

            var handler=this.props.handler;
            var title=this.props.title;

            if(handler!=null && handler!="")
            {
                return(
                    <div id="maincontainer">
                        <canvas id="myCanvas" style={style}></canvas>
                        <SnackBar />
                        <Loader />
                        <ViewAllHeader handler={handler} title={title} onUpdate={this.onUpdate}/>
                        <Section handler={handler} title={title} locationtext={this.state.value} />
                        <ECOMFooter/>
                        <CompleteDealPopup/>
                        <Modal id="BuyNowLightBx"/>
                        <Modal id="ModalPendingTransaction"/>
                    </div>  
                );
            }
            else
            {
                return(
                    <div id="maincontainer">
                        <canvas id="myCanvas" style={style}></canvas>
                        <SnackBar />
                        <Loader />
                        <SearchDealHeader handler={handler} title={title} onUpdate={this.onUpdate} />
                        <Section handler={handler} locationtext={this.state.value} />
                        <CompleteDealPopup/>
                        <Modal id="BuyNowLightBx"/>
                        <Modal id="ModalPendingTransaction"/>
                    </div>  
                );
            }

        }else if(this.props.page_id == "claimdealpage"){
            return(
                <div id="maincontainer">
                    <canvas id="myCanvas" style={style}></canvas>
                    <SnackBar />
                    <ClaimDealHeader/>
                    <Modal id="BuyNowLightBx"/>
                    <ClaimDealBodyMainContentWrapper/>
                    <CompleteDealPopup/>
                    <Modal id="BuyNowLightBx"/>
                </div>  
            );
        }else if(this.props.page_id == "attachbill"){
            return(
                <div id="maincontainer">
                    <canvas id="myCanvas" style={style}></canvas>
                    <SnackBar />
                    <AttachBillHeader/>
                    <AttachBillBody/>
                    <Modal id="CouponCodeBox"/>
                    <CompleteDealPopup/>
                    <CancelDealPopup/>
                    <Modal id="BuyNowLightBx"/>
                </div>  
            );

        }else if(this.props.page_id=="ecommerce"){
            return(
                <div id="maincontainer">
                    <SnackBar/>
                    <canvas id="myCanvas" style={style}></canvas>
                    <ECOM location_text={this.props.value} page_id={this.props.page_id}/>
                    <ECOMFooter/>
                </div>
            );

        }else if(this.props.page_id=="transhistory"){
            return(
                <div id="TransTab">
                    <SnackBar />
                    <TPHeader />
                    <TPSection />
                    <ECOMFooter/>
                    <CompleteDealPopup/>
                    <CancelDealPopup/>
                    <Modal id="BuyNowLightBx"/>
                    <Loader />
                </div>
        );
        }else if(this.props.page_id=="accountpage"){
            return(
                <div id="maincontainer" className="mobile-comtainer">
                    <SnackBar />
                    <ACHeader />
                    <ACSection />
                    <ECOMFooter />
                    <CompleteDealPopup/>
                    <CancelDealPopup/>
                    <Modal id="BuyNowLightBx"/>
                    <Modal id="ModalPendingTransaction"/>
            </div>
        );
        }else if(this.props.page_id=="dealpage"){
            return(
                <div id="maincontainer">
                    <canvas id="myCanvas" style={style}></canvas>
                    <SnackBar />
                    <DPXHRCall deal_id={this.props.deal_id} merchant_id={this.props.merchant_id} />
                    <Modal id="ModalPendingTransaction"/>
                </div>
            );
        }else if(this.props.page_id=="walletpage"){
            return(
                <div id="maincontainer">
                    <SnackBar />
                    <WPBody />
                    <ECOMFooter />
                    <CompleteDealPopup/>
                    <CancelDealPopup/>
                </div>
            );
        }else if(this.props.page_id=="locationsearch"){
            return(
                <div id="maincontainer" style={{backgroundColor: '#fff'}}>
                    <SnackBar />
                    <LocationSearchHeader  onUpdate={this.onUpdate} />
                    <LocationSearchSection searchtext={this.state.value}/>
                </div>
            );

        }else if(this.props.page_id=="voucherdetailspage"){
            var response = this.state.data;
            var merchantProfilePic = "";
            if(response != undefined){
                if(response.info != undefined && response.info != null && response.info.message.merchant_info.dealImage != null){
                    merchantProfilePic =  response.info.message.merchant_info.dealImage;
                }else{
                    if(response.profile != null && response.profile.data.merchant.coverPic != null) {
                            merchantProfilePic = response.profile.data.merchant.coverPic;
                    }else{
                            merchantProfilePic = response.info.message.merchant_info.image_url;
                    }             
                }
            }
            return(
                <div id="maincontainer">
                    <SnackBar />
                   <VoucherDetailsTopMenu merchantProfilePic ={merchantProfilePic}/>
                   <VoucherDetailsMobileContainer merchant_id={this.props.merchant_id} resObject ={response}/>
                   <Modal id="ModalPendingTransaction"/>
                </div>
            );

        }

    }
});

export default LoadBody;

和我在LoadBody中的导入：

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import SnackBar from 'components/SnackBar';
import ECOM from 'components/Ecommerce';
import ECOMSection from 'components/Ecommerce';
import ECOMFooter from 'components/Footer';
import CompleteDealPopup from 'components/Ecommerce';
import CancelDealPopup from 'components/Ecommerce';
import Modal from  'components/Ecommerce'; 

但是我收到了一个错误：

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `LoadBody`.

请帮助我，因为我无法弄清楚问题。