React + Redux: Cannot read 属性 'props' of null 错误

Question

我在当前使用 React 和 Redux 构建的客户端应用程序中收到 Cannot read 属性 'props' of null 错误。我一直在尝试为 Web 应用程序中的其他反应组件实现一个包装器 component/container，如下所示。（我包含 4 个文件内容的原因是我不知道错误来自哪里）

main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import store, {history} from './App/store';

import Init from './App/Init';


ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Router path="/" component={Init}>
                <IndexRoute component={Container}/>
                <Route path="/view/:ItemId" component={Single}></Route>
            </Router>
        </Router>
    </Provider>,
    document.getElementById('main')
);

class Container extends Component{
    render(){
        return(
            <div>hello</div>
    );
    }
}

class Single extends Component{
    render(){
        return(
            <div>hello</div>
        );
    }
}

Init.js

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import * as actionCreators from './ActionCreators'
import App from './App';

function mapStateToProps(state, ownProps){
    return{
        items: state.items,
        entities: state.entities,
    };
}

function mapDispatchToProps(dispatch){
    return bindActionCreators(actionCreators, dispatch);
}


const Init = connect(mapStateToProps, mapDispatchToProps)(App);

export default Init;

store.js

import { createStore, compse, applyMiddleware } from 'redux';
import { browserHistory } from 'react-router';
import thunkMiddleware from 'redux-thunk';
import {syncHistoryWithStore} from 'react-router-redux';

//import the root reducer
import rootReducer from './rootReducer';

//import data
import {entities} from '../../data/entities';
import {items} from '../../data/items';

//create an object for the default data
const defaultState = {
    items,
    entities,
};

const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

和App.js

    import React, {Component} from 'react';

export default class App extends Component {
    render(){
        return(
            <div>
                <div className="content-wrapper">
                    <div className="grid-page">
                        {React.cloneElement({...this.props}.children, {...this.props})}//The error occurs here
                    </div>
                </div>
            </div>
        );
    }
}

这里是错误的控制台日志

ReactElement.js:271 Uncaught TypeError: Cannot read property 'props' of null
    at Object.ReactElement.cloneElement (ReactElement.js:271)
    at Object.cloneElement (ReactElementValidator.js:223)
    at App.render (App.js:15)
    at App.<anonymous> (makeAssimilatePrototype.js:15)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

请原谅我的问题不够简洁，我没有找到任何关于堆栈溢出的答案来解决我遇到的问题，但如果你能阐明问题所在，那就太好了。谢谢

Answer 1

class 规范中的定义不会被提升，尽管 Babel 正在将其编译为一个函数表达式，这将提升变量，这就是代码在运行时不会崩溃的原因，但是class 定义仍然是 undefined

将 class Container 和 class Single 置于对 ReactDOM.render 的调用之上应该可以解决此问题。

React + Redux: Cannot read 属性 'props' of null 错误

React + Redux: Cannot read property 'props' of null error

reactjs

redux

react-router

react-redux

react-router-redux