日時を正しく取得するにはどうすればよいですか？

Question

私は日付を取得しようと、私は反応する新しい、実際の日付と時刻を取得しようとしていますが、私はそう:(

誰かが私を助けてくださいもらえを行う方法を見つけ出すことはできません！

。私はそれを実行すると、初期状態と第2のそれのすべてを実現、私は白い画面を取得

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

2つのこと：。

1. new Date().now()されていない機能、new Date()は現在の日付と時刻を返しますので、追加する必要はありません。
2. レンダー機能内で状態を設定しようとします（レンダリングの原因となるすべての単一レンダーをgetRealTimeと呼びます）。私が理解するように、あなたは毎秒の時間を更新したいと思う。あなたはそれをcomponentDidMountに設定することができます。

ここでは、それらの問題を修正したMenubarコンポーネントがあります。コンポーネントがアンマウントする間隔もクリアします：

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> 
    ); 
    } 
});