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

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

显然 dateFrom 和 dateTo 是对象。就像错误消息所说的那样：您不能将对象显示/用作 React 子对象。

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

我相信 rc-calendar 在幕后使用矩对象，所以你可能会做类似的事情：

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

Answer 2

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 3

这应该有效，不会给您任何错误。

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 4

import moment from 'moment'

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

"date" 是你的状态或道具

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

How to store and present state of time? (YYYY-MM-DD format) in react

state

date

reactjs

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

How to store and present state of time? (YYYY-MM-DD format) in react

state

date

reactjs

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