gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:36:50 28 4
gpt4 key购买 nike

背景:
定义一个钩子(Hook)并返回一个对象,该对象包含上次修改文件的时间戳。

我计算到目前为止与时间戳的差异,以向用户显示自上次保存以来已经过去了多长时间。

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

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

感谢您的宝贵时间!

最佳答案

您可以创建一个每分钟调用 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>

工作中codesandbox (您需要等待一分钟才能看到更改)

但正如斯特林·阿彻在评论中所说,这好吗?嗯...谁知道呢?

<小时/>

建议

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

关于javascript - 如何每分钟触发一次 React js 组件的重新渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60458193/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com