Блог

Главная - Вопросы по программированию - Компонент React не отображается при изменении его состояния

Компонент React не отображается при изменении его состояния

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь создать функцию синхронизации на своем сайте 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 приведет к его повторному отображению. Затем я обнаружил, что могу поместить код в метод, а затем вызвать этот метод внутри setInterval in componentDidMount , однако ни один из этих методов не работал.

Вероятно, я делаю что-то глупое, но есть ли простой способ заставить этот компонент повторно отображать себя каждую секунду?

Комментарии:

1. setInterval(this.getTime(), 1000); ————-> setInterval(this.getTime, 1000);

2. @Yousaf вау, это сработало отлично, спасибо. Если вы не возражаете, не могли бы объяснить, почему это сработало?

3. используйте TypeScript, и у вас больше не будет таких ошибок. typescriptlang.org

4. первым аргументом setInterval должна быть функция, которая setInterval может вызываться через определенный интервал. Вместо передачи функции вы вызывали функцию

5. Я предлагаю вам очистить интервал, когда компонент будет отключен. 😉

Ответ №1:

Попробуйте это:

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