Redux.connect (mapStateToProps) (MyComp) не рендерится (ошибка: объекты недопустимы как дочерний элемент React)

Question

Я пытаюсь создать страницу c html. Я использую реаги-редукс для государственного управления. Страница не отображается из-за const Time = ReactRedux.connect(mapStateToProps)(TimeConnect);

Я получаю сообщение об ошибке: «Ошибка: объекты недопустимы как дочерний элемент React»

const SUBMITED = 'SUBMITED';

const startTime = new Date();
const endTime = new Date();
endTime.setSeconds(endTime.getSeconds() + 10);

const initialState = {
    startTime,
    endTime
};

function timeChange() {
    const startTime = new Date();
    const endTime = new Date();
    endTime.setSeconds(endTime.getSeconds() + 10);
    return {
        type: SUBMITED,
        payload: {
            startTime,
            endTime
        }
    };
}

function rootReducer(state = initialState, action) {
    if (action.type === SUBMITED) {
        return Object.assign({}, state, action.payload);
    }
    return state;
}

const store = Redux.createStore(rootReducer);

function mapDispatchToProps(dispatch) {
    return {
        onSubmit: _ => { dispatch(timeChange()); }
    };
}

const SubmitConnect = ({ onSubmit }) => (
    <div>
        <button onClick={onSubmit}>Submit</button>
    </div>
);

const Submit = ReactRedux.connect(null, mapDispatchToProps)(SubmitConnect);

const mapStateToProps = state => {
    return {
        startTime: state.startTime,
        endTime: state.endTime
    }
};

const TimeConnect = ({ startTime, endTime }) => (
    <div>
        <p>startTime: {startTime}</p>
        <p>endTime: {endTime}</p>
    </div>
);

const Time = ReactRedux.connect(mapStateToProps)(TimeConnect);

ReactDOM.render(
    <ReactRedux.Provider store={store}>
        <Time />
        <Submit />
    </ReactRedux.Provider>,
    document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-with-addons.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js" type="text/javascript"></script>
<div id="root"></div>

Answer 1

startTime и endTime являются объектами даты. Вы не можете отобразить объект как реагирующий потомок, поэтому вы не можете сделать <p>startTime: {startTime}</p>. Вместо этого, превратите его во что-то, что можно отобразить, например, в строку:

<p>startTime: {startTime.toString()}</p>