Как вы можете запускать рендеринг компонента React js каждую минуту? - PullRequest
Новая
       10

Как вы можете запускать рендеринг компонента React js каждую минуту?

5 голосов
/ 28 февраля 2020

Контекст:
Хук определен и возвращает объект, который содержит метку времени последнего изменения файла.

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

const StageFooter = (props) => {
  const [, , meta] = useMetadata("Tenant Setup Data", "setupData")

  return (
    <StageControls>
      <div id="footer-start"></div>
      <SavingBlock key={meta?.modified}>
        {`Last saved ${
          meta.modified !== undefined ? formatDistanceToNow(meta.modified) : " "
        } ago`}
      </SavingBlock>
      <div id="footer-end"></div>
    </StageControls>
  )
}

export default StageFooter


Проблема:
Расчетная разница от отметки времени до настоящего времени не обновляется в режиме реального времени. Например, было бы сказано: «Последние сэкономленные 10 минут go», но через пару минут строка остается прежней. Обновление будет происходить только в том случае, если пользователь уходит со страницы, а затем назад или если пользователь обновляет страницу.

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

Спасибо за ваше время!

Ответы [ 2 ]

2 голосов
/ 28 февраля 2020

Вы можете создать эффект, который вызывает setTimeout каждую минуту, а при отображении времени просто вычитайте из даты.

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

const [fakeCurrentDate, setFakeCurrentDate] = useState(new Date()) // default value can be anything you want

useEffect(() => {
    setTimeout(() => setFakeCurrentDate(new Date()), 60000)
}, [fakeCurrentDate])

...

{/* display time passed since*/}
<div>{fakeCurrentDate - modifiedDate}</div>

Работает codesandbox (вам нужно подождать минута, чтобы увидеть изменения)

Но, как сказал Стерлинг Арчер в комментариях, это хорошо? Ну ... кто знает?

Совет

Другой подход для этого будет показать сообщение Updated at XX:XX time вместо того, чтобы показывать пользователю, сколько прошло минут. Но это гораздо больше о UX, чем технология

1 голос
/ 29 февраля 2020

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

export const Time = () => {
    // This would be the initial time. We can get it from a hook
    // (meta.modified in your case) or for this example from a ref.
    // I'm setting this to 2000 meaning it was updated 2 seconds ago.
    const initial_time = useRef(2000);
    const [time_passed, setTimePassed] = useState(0);

    useEffect(() => {
        const interval_time = 1000;

        // Set an interval that will update every interval_time
        const myInterval = setInterval(
            () => setTimePassed(time => time + interval_time),
            interval_time
        );

        // Clear the interval when the component unmounts
        return () => clearInterval(myInterval);
    }, []);

    return initial_time.current + time_passed;
};

Чтобы отобразить время, прошедшее в дружественной форме, проверьте этот другой вопрос .

...