Как в React JS показывать время и дату в реальном времени?

Question

Брифинг:

Привет, я создал ловушку useDate() для отображения текущего времени и даты следующим образом:

interface ReturnDate {
  time: string;
  date: string;
  wish: string;
}

export const useDate = (): ReturnDate => {
  const locale = 'en';
  const today = new Date();

  const day = today.toLocaleDateString(locale, { weekday: 'long' });
  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;

  const hour = today.getHours();
  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;

  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });

  return {
    date,
    time,
    wish,
  };
};

И я использую его в своем компонент ниже:

const ProfileGreetings: FC = () => {
  const { firstName } = useUserDetails();
  const { date, time, wish } = useDate();

  return (
    <div className="greetings-container">
      <h1>
        {wish}
        <PrimaryText text={`${firstName || ''}!`} />
      </h1>

      <div>
        <h3>
          {date}
          <br />
          {time}
        </h3>
      </div>
    </div>
  );
};

Формат даты / времени в приложении:

Воскресенье, 2 августа

11:54 PM

Постановка проблемы:

Сейчас происходит то, что дата и время не обновляются до тех пор, пока я не обновлю sh страницу. Есть ли способ обновить все перечисленное ниже в реальном времени ?

Я думаю использовать интервал через каждую 1 минуту для вычисления обновленных время и дату, но не знаю, хорошая ли это идея. Я также не знаю, как начать с этого и как будет очищен интервал ?

Спасибо! :)

Answer 1

Поскольку вы можете использовать хуки в пользовательских хуках, вы можете создать интервал для обновления каждую минуту следующим образом:

export const useDate = () => {
  const locale = 'en';
  const [today, setDate] = React.useState(new Date()); // Save the current date to be able to trigger an update

  React.useEffect(() => {
      const timer = setInterval(() => { // Creates an interval which will update the current data every minute
      // This will trigger a rerender every component that uses the useDate hook.
      setDate(new Date());
    }, 60 * 1000);
    return () => {
      clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount
    }
  }, []);

  const day = today.toLocaleDateString(locale, { weekday: 'long' });
  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;

  const hour = today.getHours();
  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;

  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });

  return {
    date,
    time,
    wish,
  };
};

Answer 2

import React from 'react';
import ReactDom from 'react-dom';

const date = new Date().toLocaleDateString();
const time = new Date().toLocaleTimeString();

ReactDom.render(
<>
<p>Today's date is {date}</p>
<p>Today's time is {time}</p>
</>
, 
document.getElementById('root'));

Output

Today's date is 8/14/2020

Today's time is 7:42:01 PM