Как правильно получить дату и время?

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.

Вот ваш компонент «Мюббар» с исправленными вещами. Я также очищаю интервал, когда компонент размонтирует:

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