Question

如何在 React 中存储和呈现时间状态？(YYYY-MM-DD 格式)

2017-01-22

29770

date reactjs state

在我的 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>

To{this.props.stat.dateTo}

但它会触发错误，即 对象作为 React 子项无效（发现时间：2017 年 1 月 12 日星期四 08:00:00 GMT+0800（HKT））。如果您想要渲染子项集合，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查 GeneralReport 的 render 方法和 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 是一个 对象 ，您无法直接在 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

import moment from 'moment'

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

“date” 是您的州或 prop

Lahiru Amarathunge

2020-01-31