警告：失敗した小道具のタイプ：タイプの無効な小道具 `` children` object` Provider` `に供給されるが、単一ReactElement

Question

を期待し、私は問題があります：Providerに供給されるタイプobjectの

Warning: Failed prop type: Invalid prop childrenを、単一ReactElementを期待。

私は今すぐsometimeの回答を検索しましたが、これを解決できません。反応の私のバージョンは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のいずれか（両方ではない）がインポートされた場合に発生します。両方とも前にインポートされていれば、それは問題ありません。後で両方をインポートすると、それも問題ありません。今、私の答えのアサーションはbabel-polyfillではなく、react-hot-loader/patchを最初のエントリポイントとして使用しているということです。

バベル-ポリフィルのドキュメントが明確に述べている彼らのfront page no less：

、あなたのアプリケーションへのエントリポイントの先頭にそれを必要とする必要がポリフィルを含めるには。

他のすべてのコード/ require文の前に必ず呼び出されていることを確認してください。

この要件を回避することはできますが、そうする場合は注意が必要です。だからあなたの問題への最も簡単な解決策は、WebPACKのを想定し、エントリを追加する場合は、この問題を回避する方法を参照してください

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

次のように、これが唯一の解決策ではない、あなたのエントリポイントの構成を有していて、以下の十分な説明を読むことです点はpatch.dev.js輸入Reactで

技術説明

react-hot-loader/patch（エントリポイントチャンクサイズを小さくすることを望むによるなど）オプションではありません。 babel-polyfillはまだロードされておらず、特定のブラウザではSymbolがまだ利用できないため、ReactはSymbolの代わりにREACT_ELEMENT_TYPE constantを数値形式に設定します。 ReactDOMはReactとは無関係に同じ定数定義を行います。しかし、ReactDOMの前にbabel-polyfillをインポートすると、ReactDOMをインポートしたときにSymbolを使用できるようになり、ReactDOMの定数が数値フォームではなくシンボルフォームで定義されます。したがって、ReactとReactDOMは異なるREACT_ELEMENT_TYPEを持ち、ReactDOMは他のオブジェクトとReactコンポーネントを区別できません。