如何正确获取日期和时间？

Question

我是新来的反应者，试图获取实际的日期和时间，但是我不知道该怎么做:(

有人可以帮我吗！

我尝试使日期处于初始状态并每秒实现一次。当我运行它时，我得到一个白屏。

import React from 'react';
import './Menubar.css';
import Time from 'react-time';

const Menubar = React.createClass({
getInitialState() {
    return {
        now: new Date().now(),
    };
},

getRealTime: function() {
    this.setState(
        {
            now: new Date().now(),
        })
},

/**
 * Render the Menubar component
 * @return {Component} the App Component rendered
 */
render() {
    setInterval(this.getRealTime(), 1000);
    return (
        <div className="Menubar">
            <ul className="Menubar-menu">
                <div className="">
                    <li className="Menubar-name">login name</li>
                    <li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li>
                    <li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li>
                </div>
            </ul>
        </div>
    );
}
});

export default Menubar;

Answer 1

两件事情：

1. new Date().now()不是函数，new Date()返回当前日期和时间，因此无需添加。
2. 您尝试在render函数中设置状态（调用getRealTime每个单独的render，这将导致重新渲染）。据我了解，您想每秒更新一次时间。您可以在中进行设置componentDidMount。

这是修复了这些问题的菜单栏组件。我还清除了组件卸载的时间间隔：

const Menubar = React.createClass({
  getInitialState() {
    return {
      now: new Date(),
    };
    this.interval = null;
  },

  componentDidMount: function() {
    const self = this;
    self.interval = setInterval(function() {
      self.setState({
        now: new Date(),
      });
    }, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.interval);
  },

  render() {
    return (
      <div className="Menubar">
        <ul className="Menubar-menu">
          <div className="">
            <li className="Menubar-name">login name</li>
            <li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li>
            <li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li>
          </div>
        </ul>
      </div>
    );
  }
});