如何正確獲取的日期和時間？

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. 您嘗試設置渲染功能內的狀態（調用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> 
    ); 
    } 
});