【react——小技巧】定时器setInterval

最新推荐文章于 2024-07-16 10:39:42 发布

小十八是胆小鬼

最新推荐文章于 2024-07-16 10:39:42 发布

阅读量1.3k

点赞数 1

文章标签： react.js

本文链接：https://blog.csdn.net/Akukudeteng/article/details/120230667

版权

本文介绍了在React应用中如何实现组件数据定时刷新。通过在componentDidMount生命周期方法中设置定时器，每5秒调用_referdata方法更新状态，从而达到页面数据自动刷新的效果。在componentWillUnmount时清除定时器，防止内存泄漏。_referdata方法用于更新时间并触发状态改变。

摘要由CSDN通过智能技术生成

示例：定时5秒更新一下时间

在这里插入图片描述

时间是不会自动更新的。除非你手动刷新页面，否则永远显示“1 秒前”。我们可以在 componentWillMount 中启动一个定时器，每隔 5 秒调用一下 _referdata，让它去通过 setState 更新：

解决：

....
 componentDidMount=()=>{
    //定时器
   setInterval(() => {
       this._referdata()
   }, 5000);
   }
   componentWillUnmount=()=>{
   //移除定时器
    clearInterval(this._referdata())
   }
   ....
 _referdata=()=>{
        console.log('刷新数据')
        //填写的是更新时间的
        this.setState({
            Commentdata:[...data]
        })
    }
    ....

在这里插入图片描述

小十八是胆小鬼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【react——小技巧】定时器setInterval

示例：定时5秒更新一下时间时间是不会自动更新的。除非你手动刷新页面，否则永远显示“1 秒前”。我们可以在 componentWillMount 中启动一个定时器，每隔 5 秒调用一下 _referdata，让它去通过 setState 更新：解决：.... componentDidMount=()=>{ //定时器 setInterval(() => { this._referdata() }, 5000); } componentWil
复制链接

扫一扫