it-swarm.com.de

Aktualisieren Sie die React-Komponente jede Sekunde

Ich habe mit React herumgespielt und habe die folgende Zeitkomponente, die gerade Date.now() auf dem Bildschirm rendert:

import React, { Component } from 'react';

class TimeComponent extends Component {
  constructor(props){
    super(props);
    this.state = { time: Date.now() };
  }
  render(){
    return(
      <div> { this.state.time } </div>
    );
  }
  componentDidMount() {
    console.log("TimeComponent Mounted...")
  }
}

export default TimeComponent;

Was wäre der beste Weg, um zu erhalten, dass diese Komponente jede Sekunde aktualisiert wird, um die Zeit aus einer React-Perspektive neu zu zeichnen?

60
snowflakekiller

Sie müssen setInterval verwenden, um die Änderung auszulösen. Sie müssen jedoch auch den Zeitgeber löschen, wenn die Komponente nicht gemountet wird, um Fehler zu vermeiden und Speicher zu verlieren:

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000);
}
componentWillUnmount() {
  clearInterval(this.interval);
}
64
Waiski

Dies ist ein Beispiel von der React.js-Website: 

  class Timer extends React.Component {
          constructor(props) {
            super(props);
            this.state = { seconds: 0 };
          }

          tick() {
            this.setState(prevState => ({
              seconds: prevState.seconds + 1
            }));
          }

          componentDidMount() {
            this.interval = setInterval(() => this.tick(), 1000);
          }

          componentWillUnmount() {
            clearInterval(this.interval);
          }

          render() {
            return (
              <div>
                Seconds: {this.state.seconds}
              </div>
            );
          }
        }

 ReactDOM.render(<Timer />, mountNode);
68

In der Lebenszyklusmethode componentDidMount der Komponente können Sie ein Intervall zum Aufrufen einer Funktion festlegen, die den Status aktualisiert.

 componentDidMount() {
      setInterval(() => this.setState({ time: Date.now()}), 1000)
 }
5
erik-sn
class ShowDateTime extends React.Component {
   constructor() {
      super();
      this.state = {
        curTime : null
      }
    }
    componentDidMount() {
      setInterval( () => {
        this.setState({
          curTime : new Date().toLocaleString()
        })
      },1000)
    }
   render() {
        return(
          <div>
            <h2>{this.state.curTime}</h2>
          </div>
        );
      }
    }
2
Jagadeesh

Sie waren also auf dem richtigen Weg. Sie könnten den Job in Ihrer componentDidMount() abgeschlossen haben, indem Sie setInterval() implementiert haben, um die Änderung auszulösen. Denken Sie jedoch daran, dass ein Komponentenstatus über setState() aktualisiert werden kann. In Ihrer componentDidMount() hätten Sie Folgendes tun können:

componentDidMount() {
  setInterval(() => {
   this.setState({time: Date.now()})    
  }, 1000)
}

Außerdem verwenden Sie Date.now(), das mit der componentDidMount()-Implementierung funktioniert, die ich oben angeboten habe. Sie erhalten jedoch eine lange Anzahl unanständiger Zahlen, die nicht für Menschen lesbar sind. Technisch gesehen ist dies jedoch die Zeit, die seit dem 1. Januar 1970 in Millisekunden aktualisiert wird. Wir möchten jedoch, dass diese Zeit lesbar wird, damit wir Menschen die Zeit lesen. Daher möchten Sie nicht nur setInterval lernen und implementieren, sondern auch new Date() und toLocaleTimeString() kennenlernen.

class TimeComponent extends Component {
  state = { time: new Date().toLocaleTimeString() };
}

componentDidMount() {
  setInterval(() => {
   this.setState({ time: new Date().toLocaleTimeString() })    
  }, 1000)
}

Beachten Sie, dass ich auch die constructor()-Funktion entfernt habe. Sie werden nicht unbedingt benötigt. Mein Refactor entspricht 100% der Initialisierung der Site mit der constructor()-Funktion.

0
Daniel