Question

我一直在接收一个无法读取我正在使用react和redux构建的客户端应用程序中的null错误属性'props'。我一直在尝试为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>
        );
    }
}

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正在将其编译为函数表达式，这将提升变量，这就是代码在运行时不会崩溃的原因，但类定义仍为undefined

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

React + Redux：无法读取null错误的属性'props'

1 个答案: