警告：道具类型失败：提供给“提供者”的对象类型为“对象”的道具儿童无效，需要一个ReactElement

Question

我有个问题：

Warning: Failed prop type: Invalid prop children of type object supplied to Provider , expected a single ReactElement.

我已经搜索了一段时间，但无法解决。 我的React版本是15.3.0。

谢谢〜

    import React from 'react';
    import ReactDom from 'react-dom';
    import { createStore, applyMiddleware, combineReducers } from 'redux';
    import { Provider } from 'react-redux';
    import { Router, Route, IndexRoute, hashHistory } from 'react-router';
    import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
    import thunkMiddleware from 'redux-thunk';

    import reducers from './redux/reducers';
    import Entrance from './components/Entrance.jsx';
    import EntranceNone from './components/EntranceNone.jsx';
    import CreditPoints from './components/CreditPoints.jsx';
    import CreditPrivilege from './components/CreditPrivilege.jsx';
    import CreditPromote from './components/CreditPromote.jsx';

    let reduxDevTool = null;
    let combReducer = { app: reducers, routing: routerReducer };
    let store = createStore(combineReducers(combReducer), applyMiddleware(thunkMiddleware));

    const history = syncHistoryWithStore(hashHistory, store);

    ReactDom.render(
        <Provider store={store}>
            <div>
                <Router history={history}>
                    <Route path="/" component={ Entrance }></Route>
                    <Route path="/EntranceNone" component={ EntranceNone }></Route>
                    <Route path="/creditPoints" component={ CreditPoints }></Route>
                    <Route path="/privilege" component={ CreditPrivilege }></Route>
                    <Route path="/promote" component={ CreditPromote }></Route>
                </Router>
            </div>
        </Provider>,
        document.getElementById('app')
    );


require('../less/entrance.css');
import { initRootFontSize,originDomin } from '../utils';
import React,{Component} from 'react';
import classNames from 'classnames';
import 'babel-polyfill';
import cookie from 'react-cookie';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as Actions from '../redux/action';
import { hashHistory ,Link } from 'react-router';

class Entrance extends Component { 
    constructor (props) {
        super(props);
        initRootFontSize();
        this.state = {
            agree:true,
            submitFlag:false
        };
    }

    handleAgreeMent(){
        this.setState({agree:!this.state.agree});
    }

    componentDidMount(){
        if(creditData.isOpenCreditService === "0"){
            this.context.router.push('/');
        }else{
            this.context.router.push('/creditPoints');
        }
    }

    componentDidUpdate(prevProps,prevState){
        if(this.props.resCode && this.state.submitFlag){
            if(this.props.resCode == "000"){
                this.context.router.push('/creditPoints');
            }else{
                alert(this.props.resMsg);
            }
        }
    }

    handleClick(){
        if(this.state.agree){ 
            this.props.actions.fetchIsOpen();
            this.setState({submitFlag:true}); 
        }
    }

    render () {   
        return(
            <div className="wrap">
                <div className="credit-img"></div>
                <div className="credit-cont">
                    <p className="credit-cont-up">xxx</p>
                    <p className="credit-cont-down">xxx</p>
                </div>
                <div className="credit-agree"><span className={classNames({icon: true, iconSelected: this.state.agree})} onClick={this.handleAgreeMent.bind(this)}></span><span className="credit-agree-cont">xx<a href={originDomin()+'static.pay.xiaomi.com/mi-credit-points/src/html/agreeMent.html'} className="credit-agree-detail">xxx</a></span></div>
                <div className={classNames({button: true,bottonFalse:this.state.agree,submitFlag:this.state.submitFlag})}  onClick={this.handleClick.bind(this)}>{this.state.submitFlag?'x':'xx'}</div>
            </div>
        );
    }

}

function mapStateToProps(state) {
    return {
        resCode: state.app.resCode,
        resMsg: state.app.resMsg,
        dataList: state.app.dataList
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(Actions, dispatch),
    };
}

Entrance.contextTypes = {
    router: React.PropTypes.object
};

export default connect(mapStateToProps, mapDispatchToProps)(Entrance);

Answer 1

我将作一些断言，因为细节太少了，但是此错误发生在非常特殊的情况下，稍后将对此进行详细说明。 具体来说，如果在babel-polyfill之前导入了React或ReactDOM（但不是全部），则会发生这种情况。 如果两者都以前导入，那很好。 如果两者都是在以后导入的，那也很好。 现在，我的答案是断言是您使用react-hot-loader/patch作为您的第一个入口点，而不是babel-polyfill 。

Babel-polyfill文档清楚地在其首页上注明：

要包括polyfill，您需要在应用程序入口点的顶部要求它。

确保在所有其他代码/要求语句之前调用它！

虽然可以解决此要求，但必须小心。 因此，假设您是webpack，最简单的解决方案是对入口点进行如下配置

entry: {
    'babel-polyfill',
    'react-hot-loader/patch',
    ...
}

这不是唯一的解决方案，请阅读下面的完整说明，以了解如果无法添加入口点，如何避免此问题（例如，由于希望减小入口点块大小）

技术说明

patch.dev.js中的 react-hot-loader/patch导入React 。 因为尚未加载babel-polyfill polyfill ，并且在某些浏览器上Symbol尚不可用，所以React将其REACT_ELEMENT_TYPE常量设置为数字形式，而不是Symbol 。 ReactDOM将独立于React为其自身执行相同的常量定义。 但是，如果现在babel-polyfill是在ReactDOM之前导入的，那么符号在导入ReactDOM时现在可用，因此ReactDOM的常量将以Symbol形式而不是数字形式定义。 因此，您的React和ReactDOM具有不同的REACT_ELEMENT_TYPE，并且ReactDOM无法将React组件与其他对象区分开。