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

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

我自己对 React 很天真，但根据我的理解，您可以使用 useState Hook 来获取/存储东西。

我会得到现在和午夜之间的区别(此处表示为 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;