Avertissement : Proptypes non valides : la prop `children` de type `object` fournie à `Provider` est invalide, une seule ReactElement est attendue

Question

```html

J'ai un problème:

Attention: Propriété de type invalide: Propriété `children` de type `object` fournie à `Provider`, un seul ReactElement était attendu.

J'ai cherché une réponse pendant un certain temps maintenant mais je n'arrive pas à résoudre cela. Ma version de react est 15.3.0.

merci~

    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(

        ,
        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(

                    xxx
                    xxx

                xxxxx
                {this.state.submitFlag?'x':'xx'}

        );
    }

}

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

Je vais faire quelques affirmations, car il y a très peu de détails, mais cette erreur se produit dans une situation très spécifique qui est expliquée plus en détail plus tard. En particulier, cela se produit si React ou ReactDOM (mais pas les deux) est importé avant babel-polyfill. Si les deux sont importés avant, c'est bien. Si les deux sont importés après, c'est également bien. Maintenant, l'affirmation de ma réponse est que vous utilisez react-hot-loader/patch comme votre premier point d'entrée, au lieu de babel-polyfill.

La documentation de Babel-polyfill indique clairement sur leur page d'accueil:

Pour inclure le polyfill, vous devez le requérir en haut du point d'entrée de votre application.

Assurez-vous qu'il est appelé avant tout autre code/déclaration require !

Vous pouvez contourner cette exigence, mais vous devez être prudent si vous le faites. Donc, la solution la plus simple à votre problème, en supposant webpack, est d'avoir votre configuration de point d'entrée comme suit

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

Ce n'est pas la seule solution, lisez l'explication complète ci-dessous pour voir comment éviter ce problème si ajouter un point d'entrée n'est pas une option (par exemple en raison du désir de réduire la taille du chunk du point d'entrée)

Explication technique

react-hot-loader/patch dans patch.dev.js importe React. Parce que babel-polyfill n'est pas encore chargé et que Symbol n'est pas encore disponible sur certains navigateurs, React définit sa constante REACT_ELEMENT_TYPE sous forme numérique au lieu de Symbol. ReactDOM fera cette même définition constante pour elle-même indépendamment de React. Cependant, si babel-polyfill est maintenant importé avant ReactDOM, Symbol est maintenant disponible lorsque ReactDOM est importé et donc la constante pour ReactDOM est définie sous forme de Symbol plutôt que de numérique. Par conséquent, votre React et ReactDOM ont un REACT_ELEMENT_TYPE différent et ReactDOM est incapable de distinguer les composants React des autres objets.