如何存储和呈现时间状态？（YYYY-MM-DD 格式）在反应

Question

在我的Statistics州，有

const initialState = {
 fetching: false,
 channel: null,
 dateFrom: {},
 dateTo: {},
};

dateFrom和dateTo是当用户点击日历中的开始日期和结束日期时的值。我rc-calendar用于显示和获取日期数据。

在我的GeneralReport组件中，我试图显示 start datedateFrom和 end date dateTo。所以我做了如下代码

render () {
    const { stat } = this.props;
    console.log(this.props.stat)
    return (
        <div className = "general_report">
            <header className = "general_report_head">General Report</header>
            <div className="report_dates">
            From<span className="number">{this.props.stat.dateFrom}</span>

到{this.props.stat.dateTo}

但它触发了错误，Objects are not valid as a React child (found: Thu Jan 12 2017 08:00:00 GMT+0800 (HKT)). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of GeneralReport并且TypeError: internalInstance is null

我应该如何呈现dateFrom和dateTo？

提前致谢。

---编辑组件

import React, {PropTypes}                           from 'react';
import classnames                                   from 'classnames';
import Actions                                      from '../../       actions/statistics';
import Moment                                       from 'moment';

export default class GeneralReport extends React.Component {
render () {
    const { stat } = this.props;
    console.log(this.props.stat)
    return (
        <div className = "general_report">
            <header className = "general_report_head">General Report</header>
            <div className="report_dates">
            From<span className="number">{this.props.stat.dateFrom.format('YYYY-MM-DD')}</span>To<span className="number">{this.props.stat.dateTo.format('YYYY-MM-DD')}</span>
            </div>
            <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
            <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
        </div>
     );


 }
}

Answer 1

Date是一个object，你不能直接在ui中渲染它，首先将日期对象转换为字符串。您已经导入moment，使用格式功能，试试这个：

import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../       actions/statistics';
import Moment from 'moment';

export default class GeneralReport extends React.Component {
    render () {
        //const { stat } = this.props;
        //console.log(this.props.stat)
        return (
            <div className = "general_report">
                <header className = "general_report_head">General Report</header>
                <div className="report_dates">
                    From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
                    To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
                </div>
                <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
                <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
            </div>
        );
   }
}

参考：http : //momentjs.com/

你也可以使用Date对象方法toDateString()，试试这个：

<div className="report_dates">
    From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
    To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>