记粗心错误:设置定时器之后需要及时清除!
(技术栈 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踩坑。