记粗心错误:设置定时器之后需要及时清除!

(技术栈 react)

在做项目的时候有两个页面吧,然后其中一个页面需要显示当前时间。

所以先写了一个函数获取当前的时间大致如下:

import moment from "moment";
import ReactDOM from "react-dom";

   //时间日期
export function time(){
  let nowtime =(
    <span>{moment().format('YYYY-MM-DD HH:mm:ss')}</span>
  );//获取当前时间
  ReactDOM.render(
    nowtime,
    document.getElementById('页面上需要渲染的节点id')
  );//返回当前时间
}

然后需要在页面中调用就先引入此函数了

import { time } from '文件位置';

因为原来接手的代码是一个类组件,没有改动直接在生命周期内调用此函式

componentDidMount() {  
    setInterval(time,1000)//每秒执行一次time方法
}

这里就简单实现了一个动态获取当前时间在页面上展示的需求

但是当页面切换时报错

'页面上需要渲染的节点id' is not a element

思考之后想到在切换页面时,计时器仍然在调用运行,然而在另一个页面没有此节点所以报错。所以接下来需要在切换页面之前清除此计时器,同样写在生命周期内
componentWillUnmount(){
  for( var i=0;i<9999;i++ ){
    clearInterval(i);//匿名计时器销毁
  }
}

至此 问题解决。初学react踩坑。

 

 

posted @ 2021-05-25 10:00  又拿代码换酒钱  阅读(212)  评论(0编辑  收藏  举报