как обновлять компонент React каждую секунду, чтобы он печатал дату в диапазоне [3 часа назад, сейчас]

Question

Я создаю компонент React, который я хочу обновлять сам каждую секунду.Мне нужно, чтобы этот компонент охватывал промежуток времени 3 часа (от 3 часов назад до настоящего времени), и он обновляется каждую секунду.Таким образом, каждая секунда должна быть «связана» с датой от 3 часов назад до настоящего момента.

Как я могу это сделать?

Это мой код:

import React from 'react'

const NOW = Date.now()

export class TimeTest extends React.Component {
  state = {
    now: new Date(),
  }

  componentDidMount() {
    const newDate = new Date(Number(new Date()) + (Date.now() - NOW) * 1000)
    this.interval = setInterval(() => this.setState({ now: newDate }), 1000)
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  render() {
    console.log(this.state.now)

    return (
      <div>
        <div>{`Time: ${this.state.now}`}</div>
      </div>
    )
  }
}

рабочий компонент должен печатать дату каждую секунду, и эти данные должны находиться в диапазоне [3 hours ago, now].Вместо этого я получаю следующие отпечатки:

Sun Dec 16 2018 12:14:23 GMT+0100 (Central European Standard Time)
Sun Dec 16 2018 12:14:23 GMT+0100 (Central European Standard Time)
Sun Dec 16 2018 12:14:23 GMT+0100 (Central European Standard Time)
Sun Dec 16 2018 12:14:23 GMT+0100 (Central European Standard Time)
Sun Dec 16 2018 12:14:23 GMT+0100 (Central European Standard Time)
(forever...16 December 2018 at 12:14:23)

Теперь это не работает, и я не уверен, что это правильный путь к тому, что я хочу.

Любая помощь приветствуется.Большое спасибо

Answer 1

Вы можете попробовать что-то вроде этого:

• Создать начальное значение даты в состоянии.
• При загрузке добавить setTimeout, который будет выполняться через 1 секунду, чтобы обновитьвремя.
• Чтобы обновить значение, используйте функцию setSeconds, поскольку у вас есть объект даты.
• Так как, setSeconds, устанавливает значение, вам придется извлечь ранее установленное значение и добавить к нему 1.

class TimeTest extends React.Component {
  state = {
    now: new Date(new Date().setHours(new Date().getHours() - 3)),
  }
  
  updateTime() {
    setTimeout(() => {
      const now = this.state.now;
      now.setSeconds(now.getSeconds() + 1)
      this.setState({ now });
    }, 1000)
  }

  render() {
    this.updateTime();
    return (
      <div>
        <div>{`Time: ${this.state.now}`}</div>
      </div>
    )
  }
}

ReactDOM.render(<TimeTest/>, document.querySelector('.container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.5.0/react-dom.min.js"></script>
<div class='container'/>