React JS pobierz bieżącą datę

Question

Chcę wypisać bieżącą datę w moim componnent. W konsoli mój kod działa, ale React konsola mówi:

"bundle.js: 14744 Uncaught RangeError: Maksymalny rozmiar stosu wywołań przekroczyła"

Moja komponent wygląda tak:

import React from 'react'; 
var FontAwesome = require('react-fontawesome'); 

export class Date extends React.Component { 
    constructor() { 
     super(); 

     var today = new Date(), 
      date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate(); 

     this.state = { 
      date: date 
     }; 
    } 

    render() { 
     return (
      <div className='date'> 
       <FontAwesome name='calendar' />{this.state.date} 
      </div> 
     ); 
    } 
} 

Tak, wiem, że jestem całkiem początkującym, ale może ktoś może mi pomóc. Pobierałem go przez wiele godzin. -

Thx dużo!

Answer 1

Twój problem polega na tym, że nazywasz swoją klasę komponentów Date. Kiedy zadzwonisz pod numer new Date(), nie utworzysz instancji z Date, której spodziewasz się utworzyć (co prawdopodobnie jest this Date) - spróbuje utworzyć instancję klasy komponentu. Następnie konstruktor spróbuje utworzyć kolejną instancję, kolejną instancję i kolejną instancję ... Dopóki nie skończy się przestrzeń stosu i pojawi się błąd, który widzisz.

Jeśli chcesz używać klasy Date, spróbuj nazwać swoją klasę czymś innym, na przykład Calendar lub DateComponent.

Powodem tego jest to, jak JavaScript radzi sobie z zasięgiem nazwy: Kiedy tworzysz nowy nazwany obiekt, jeśli w zasięgu znajduje się już obiekt o tej nazwie, nazwa przestanie się odnosić do poprzedniej jednostki i zacznie odnosić się do twojej nowy podmiot. Jeśli więc używasz nazwy Date w klasie o nazwie Date, nazwa Date będzie odwoływać się do tej klasy, a nie do dowolnego obiektu o nazwie Date istniejącego przed rozpoczęciem definicji klasy.