时间为午夜时更新日期和时间

Question

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

我的方法

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 context api 来管理状态。下面是 reducers.js 的部分，它从现在开始计算当前时间。

import moment from "moment";

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

在午夜刷新页面的最佳选择是什么，这将更新 startDate 和 endDate 并在时间为午夜时滚动到第二天？

Answer 1

我自己对 React 很幼稚，但据我了解，您可以使用 useState 钩子在那里获取/存储东西。

我会知道现在和午夜之间的区别（这里表示为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;

Answer 2

我没有看到您在 setInterval 中使用上下文中的 startDate 或 endDate，所以看不到这方面的相关性吗？很难说什么是行不通的，但我会建议一种稍微不同的方法。如果时间是正好是午夜...而不是检查每秒...相反，我会检查时间是否是过去的午夜（使用>=），然后还存储上次刷新页面时，可能在本地存储中。然后您将逻辑更改为：是在午夜之后，并且自上次页面刷新以来已经过去了 8 多个小时（或 23 小时...... w/e）？刷新页面。类似的东西。