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

【问题标题】：React component doesn't render when I change its state当我更改其状态时，React 组件不呈现
【发布时间】：2020-10-07 13:19:52
【问题描述】：

我正在尝试在我的 React 网站上制作时钟功能，并且我已经为组件编写了以下代码：

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;

我试图让这个组件显示的时间每秒更新一次，我认为只使用setState 会重新渲染它。然后我发现我可以将代码放在一个方法中，然后在componentDidMount 中的setInterval 中调用这个方法，但是这些方法都不起作用。

我可能在做一些愚蠢的事情，但有没有一种简单的方法可以让这个组件每秒重新渲染一次？

【问题讨论】：

setInterval(this.getTime(), 1000); -------------> setInterval(this.getTime, 1000);
@Yousaf 哇，效果很好，谢谢。如果你不介意，能解释一下为什么会这样吗？
使用 TypeScript 就不会再出现这种错误了。 typescriptlang.org
setInterval 的第一个参数应该是setInterval 可以在特定时间间隔后调用的函数。您没有传递函数，而是调用了函数
我建议你清除组件卸载的时间间隔。 ;)

标签： javascript reactjs

【解决方案1】：

试试这个：

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

【讨论】：