更新时间和时间的时间是午夜

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;

我正在使用来管理状态。下面是reducers.js的一部分，它从现在开始就需要花费时间。

import moment from "moment";

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

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

Answer 1

当涉及到我自己的反应时，我很天真，但据我所知，您可以使用useState钩子来获取/存储那里的东西。

我会得到现在和午夜之间的区别(这里表示为endOf("day").add(1, 'ms'))，然后设置一个超时时间。不要费心检查每一秒、每分钟或每小时。你知道需要多少时间才能过去，让它过去吧。setTimeout函数并不是非常精确，但在这些尺度上它并不重要。我甚至不会检查；只是刷新一下。在极不可能发生的情况下，还为时过早，它将重新计算下一个超时时间，以便非常迅速地自行解决。

使用状态变量作为iframe的iframe会在url更改时导致url的重发，但这很好--您之前是重新加载页面，这样做的破坏性要小一些。

我不确定这是否有效；我没有费心创建一个沙箱。试试，看看能不能帮上忙。如果没有，请创建一个沙箱(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

我没有看到您在您的startDate中使用上下文中的endDate或endDate，所以不知道这有什么关系吗？很难说什么不能确定，但我建议采取一种稍微不同的方法。而不是每秒钟检查一次如果时间正好是午夜..。相反，我会检查时间是否已经过了午夜(使用>=)，然后也存储最后一次刷新页面的时间，可能在本地存储。然后你将把你的逻辑改变为:午夜过后，超过8小时(或23小时).w/e)自上次页面刷新以来已经过去了吗？刷新页面。差不多吧。