React + Redux：无法读取空错误的属性“道具”答案

【问题标题】：React + Redux: Cannot read property 'props' of null errorReact + Redux：无法读取空错误的属性“道具”
【发布时间】：2017-06-05 16:40:15
【问题描述】：

我在当前使用 react 和 redux 构建的客户端应用程序中收到无法读取属性“props”的 null 错误。我一直在尝试为 Web 应用程序中的其他反应组件实现一个包装器组件/容器，如下所示。（我包含 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>
        );
    }
}

初始化.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)

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

【问题讨论】：

坦率地说，我很惊讶您没有收到语法错误。无论如何，请看这里React.cloneElementstackoverflow.com/questions/35835670/…的正确用法
那不行？？？...“children”对象仍然为空？
class 没有被提升.. 尝试将 Container 和 Single 的定义放在您的 ReadDOM.render 调用之上
太棒了，成功了！谢谢。

标签： reactjs redux react-router react-redux react-router-redux

【解决方案1】：

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

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

【讨论】：