如何每分钟触发一次 React js 组件的重新渲染？

Question

上下文：
定义了一个钩子并返回一个对象，该对象包含上次修改文件的时间戳。

我计算从时间戳到现在的差异，以向用户显示自他们上次保存以来已经过去了多长时间。

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 分钟前”，但过了几分钟后，字符串仍然保持不变。仅当用户导航离开页面然后返回或用户刷新页面时，它才会更新。

考虑到所有这些，我基本上希望每过一分钟就重新渲染组件，以便实时更新值。

谢谢你的时间！

Answer 1

您可以创建每分钟调用一次的效果setTimeout，并且在显示时间时，只需从日期中减去即可。

您还应该为此创建一个单独的组件，因此如果您在组件内部使用它，它不会“每分钟”重新渲染孔组件，而只会重新渲染文本“自上次更改以来的 x 分钟”

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>

工作代码和框（您需要等待一分钟才能看到更改）

但正如斯特林·阿彻在评论中所说，这样好吗？嗯……谁知道呢？

一个建议

另一种方法是显示一条消息，Updated at XX:XX time而不是向用户显示已经过去了多少分钟。但这更多的是关于用户体验而不是技术