当时间是午夜时更新日期和时间

Question

我正在研究要在大电视上显示的 React 仪表板。它可以正常工作一天。但是当时间到达午夜时，仪表板会卡在同一天并且不会滚动到第二天。

我的做法

import React from 'react'
import moment from "moment";

function UpdateDate() {

const [{ startDate, endDate }] = useStateValue();

    useEffect(() => {

        var daterollOver = setInterval(function () {
            var now = moment().format("HH:mm:ss");
            if (now === "00:00:00") {
                window.location.reload();
            }
        }, 1000);

        return () => {
            clearInterval(daterollOver);
        }
    }, [])

    var url=`http:domain/live-dashboard?from=${startDate}&to=${endDate}`;
    return (
      <div>
          <iframe
            className="embed-responsive-item"
            src={url}
      ></iframe>
        </div>
    )
}

export default UpdateDate;

我正在使用 React 上下文 api 来管理状态。下面是 reducers.js 的部分，它从 moment.

获取当前时间

import moment from "moment";

export const initialState = {
    startDate: moment().startOf("day").local();,
    endDate: moment().endOf("day").local();,
}

什么是在午夜刷新页面的最佳选择，它会更新开始日期和结束日期并在午夜时间滚动到第二天？

Answer 1

我没有看到您在 setInterval 中使用上下文中的 startDate 或 endDate，所以看不出这有什么关联？很难说什么是行不通的，但我会建议一种稍微不同的方法。如果时间 正好是午夜 ，而不是每秒 检查一次 ... 相反，我会检查时间是否是 PAST 午夜（使用 >=)，然后还存储最后一次刷新页面的时间，可能在 localstorage 中。那么你会把你的逻辑改成：是不是午夜过后，距离上次页面刷新已经过去了8个多小时（或者23小时...w/e）？刷新页面。诸如此类。

Answer 2

我自己对 React 很天真，但据我了解，您可以使用 useState 挂钩 get/store 那里的东西。

我会得到现在和午夜之间的差异（此处表示为 endOf("day").add(1, 'ms')），然后只需设置那么长时间的超时。不要费心检查每一秒、每分钟或每小时。你知道需要流逝多少时间，让它流逝吧。 setTimeout 函数不是非常准确，但在这些尺度上它并不重要。我什至不会检查；只是刷新。在极不可能发生的情况下为时过早，它将重新计算下一个超时非常快并自行解决。

使用状态变量作为 iframe 的 src 将在 url 更改时导致 HTML 重新渲染，但这没关系 - 你是之前重新加载页面，这个比那个破坏性小

我不确定这是否有效；我没有费心创建沙箱。试试看，看看是否有帮助。如果没有，请创建一个沙箱（jsFiddle、codepen 等）来证明它不工作。

import React from 'react'
import moment from "moment";

function UpdateDate() {
  function generateUrl() {
    return `http:domain/live-dashboard?from=${moment().startOf("day")}&to=${moment().endOf("day")}`;
  }
  const [url, setUrl] = useState(generateUrl());
  useEffect(() => {
    let lastTimeout = 0;
    let setupReload = function() {
      const timeUntilMidnight = moment().diff(moment().endOf("day").add(1, "ms"), "ms");
      return setTimeout(function() {
        setUrl(generateUrl());
        lastTimeout = setupReload();
      }, timeUntilMidnight);
    };

    lastTimeout = setupReload();
    return () => {
      clearInterval(lastTimeout);
    }
  }, []);

  return (
    <div>
      <iframe className="embed-responsive-item"
              src={ url }>
      </iframe>
    </div>
  );
}

export default UpdateDate;

当时间是午夜时更新日期和时间

Update date and time when time is midnight

html

javascript

momentjs

reactjs