当我更改其状态时，React 组件不会呈现

Question

I am trying to make a clock feature on my React site, and I have written this code for the component:

import React, { Component } from "react";

class Clock extends Component {
  state = { time: "00:00" };

  getTime = () => {
    var d = new Date();
    var hours = d.getHours();
    var mins = d.getMinutes();
    var secs = d.getSeconds();
    if (mins < 10) {
      mins = "0" + mins;
    }
    if (secs < 10) {
      secs = "0" + secs;
    }
    let formatDate = hours + ":" + mins + ":" + secs;
    this.setState({ time: formatDate });
  };

  componentDidMount() {
    this.getTime();
    setInterval(this.getTime(), 1000);
  }

  render() {
    return (
      <div>
        <p className="Clock">{this.state.time}</p>
        <button onClick={this.getTime}>Refresh</button>
      </div>
    );
  }
}

export default Clock;

I am trying to make the time that this component displays update every second, and I thought that just using setState would re-render it. I then found out that I could put the code in a method, and then call this method inside of a setInterval in componentDidMount however neither of these methods worked.

I am probably doing something dumb, but is there a simple way I can get this component to re-render itself every second?

Answer 1

Try this:

 componentDidMount() {
  this.getTime();
  setInterval(this.getTime, 1000);
}