Question

在我的Statistics州，有

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

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

在我的GeneralReport组件中，我正在尝试显示开始日期dateFrom和结束日期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>

Answer 2

这应该有用，不会给你任何错误。

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
    const { dateFrom, dateTo, revenue, order } = stat
    return (
      <div className="general_report">
        <header className="general_report_head">
          General Report
        </header>
        <div className="report_dates">
        From
        <span className="number">
          {moment(dateFrom).format('YYYY-MM-DD')}
        </span>
        To
        <span className="number">
          {moment(dateTo).format('YYYY-MM-DD')}
        </span>
        </div>
        <div className="report_main_result">
          Total Revenue:
        <span className="number">
          {revenue}
        </span>
        </div>
        <div className="report_main_result">
        Total orders:
        <span className="number">
          {order}
        </span>
        </div>
      </div>
    );
  }
}

Answer 3

从“瞬间”开始导入

moment(date).format('YYYY-MM-DD')

“日期”是您的状态或道具

Answer 4

显然dateFrom和dateTo是对象。并且如错误消息所示：您无法显示/使用对象作为React子对象。

您可能会错过的是在您的日期调用格式化方法。

我相信rc-calendar使用引擎盖下的时刻对象，所以你可能会做类似的事情：

<span>{this.props.stat.dateFrom.format('YYYY-MM-DD')}</span>

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

4 个答案:

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

4 个答案:

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