Création d'une horloge en cours en utilisant moment & moment-timezone dans la réaction

Question

J'essaye de créer un composant de réaction qui rend une horloge à retardement. J'utilise le moment et le moment-fuseau horaire pour différentes fuseaux horaires. J'ai été capable de créer un composant avec une horloge statique (ne pas incrémenter), mais je suis incapable de créer une horloge à cocher. Le code est ci-dessous:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import moment from 'moment'; 
import 'moment-timezone'; 

export default class TimeClock extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { time: moment().clone().tz(this.props.timezone).toLocaleString() }; 
     this.displayTime = this.displayTime.bind(this); 
    } 

    displayTime(){ 
     //let now = moment(); 
     //let location = now.clone().tz(this.props.timezone); 
     this.setState({ 
      time: moment().clone().tz(this.props.timezone).toLocaleString() 
     }); 
     //return location.toLocaleString(); 
    } 
    render(){ 
     //let now = moment(); 
     //let location = now.clone().tz(this.props.timezone); 
     //let timezone = this.props.timezone; 
     return (
      <div> 
       <p>{this.props.timezone}</p> 
       <p>{setInterval(this.displayTime,1000)}</p> 
      </div> 
     ); 
    } 
} 

Note: avoir été adopté un accessoire (fuseau horaire) de app.js, un composant parent.

Code actuel produit les éléments suivants:

Australia/Melbourne 

####### 

où ####### représente un nombre qui a commencé à 5 ou 6 et augmente rapidement. Est-ce que quelqu'un peut expliquer ce que je fais mal? Edit: peu après avoir posté cette question, j'ai trouvé le lien suivant (Where to apply my moment() function in a react component?), que j'ai adapté à mon code et qui a fonctionné, mais je ne comprends pas pourquoi ma tentative n'a pas fonctionné. Je suis nouveau à réagir.

Answer 1

Votre code ne restitue rien lié à l'heure actuelle. Cette ligne:

<p>{setInterval(this.displayTime,1000)}</p> 

n'imprime pas l'heure actuelle - il affiche l'ID d'intervalle créé, parce que ce qui est retourné par setInterval() fonction. Donc, tout d'abord, vous devez changer cette ligne pour afficher l'heure, en fonction de l'état du composant. Cela peut être fait comme ceci:

<p>{this.state.time}</p> 

Une autre chose que vous devez faire est de créer correctement l'intervalle. Réglage en méthode render() est pas une bonne idée, parce que vous allez créer un nouvel intervalle

componentDidMount() { 
    // Arrow function allows you to use "this" in context of the Component 
    this.interval = setInterval(() => { 
     this.displayTime(); 
    }), 1000); 
} 

(vous devriez vous rappeler également de désactiver l'intervalle une fois que le composant est retiré de la vue).