React SetInterval 无法清理

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React2!</title> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var FatherControl = React.createClass({ getInitialState:function(){ return{ isStop:false, isNum:1 }; }, onChildChanged:function(newState){ this.setState({ isStop:newState }); var dd; this.timer = setInterval(()=>{ var eeNum = this.state.isNum; this.setState({isNum:eeNum+1}); if(!this.state.isStop){ console.log('this is stop'); console.log(this.timer); //这里可以取到这个timer的 clearInterval(this.timer); this.timer = undefined; } },1000); }, componentWillUnMount:function(){ //这个测试用的，可以忽略 clearInterval(this.timer) }, numberAdd:function(){ //这个也是测试用的，也可以忽略 var ee=0 ee = setInterval(function(){ var eeNum = this.state.isNum; this.setState({isNum:eeNum+1}) }.bind(this),1000); return function(){ this.ee; } }, render:function(){ return ( <div> <ImgPanel showvalue={this.state.isNum}></ImgPanel> <MyButton callbackParent={this.onChildChanged}>Start</MyButton> </div> ) } }) var MyButton = React.createClass({ getInitialState:function(){ return { isStop:this.props.onclick }; }, funClick:function(){ var newState = !this.state.isStop; this.setState({ isStop:newState }); this.props.callbackParent(newState); }, render:function(){ var checked = this.state.checked; return( <button onClick={this.funClick}>Start</button> ) } }) var ImgPanel = React.createClass({ render:function(){ return( <h3>{this.props.showvalue}</h3> ) } }); ReactDOM.render( <FatherControl/>, document.getElementById('example') ); </script> </body></html>现在在练习react组件部分的交互，FatherControl是父组件，MyButton和ImgPanel是子组件，ImgPanel是一个计数的功能，点击MyButton时候可以启动或者停止。刚开始练习，用的是旧版本的React...

查看完整描述

3 回答

已采纳

Caballarii

TA贡献1123条经验获得超629个赞

先把环境搭会了再来讨论高级点的功能，react不是写在<script type="text/babel">里的，请去把npm+webpack环境搭好再说，要用就用最新版。

timer清不掉是组件本身没有属性，你需要把timer放到state上，然后清state，当然用state只保持状态然后componentDidUpdate里面setTimeout逻辑会更好

2 反对回复 2017-03-17

lmc_study
好的，谢谢，我先按照你说的改下试试、、回头搭下开发环境，，刚接触、图方便就这么写了

回复 2017-03-17
lmc_study
你好，，麻烦再问下 1、timer放到state上面，state保持状态指的是是否清理timer（state）吗? 2、componentDidUpdate方法里面是否是写是否清理timer的代码? 初学者。。刚才按你说的把代码重新写了遍。然后各种调试，还是没能成功，你要是有时间的话希望能再指点下。。谢谢！下面这是我修改的代码。 var FatherControl = React.createClass({ getInitialState:function(){return{isStop:true,isNum:1,timer:''}; }, tick:function(){ this.setState({isNum: this.state.isNum + 1}); }, componentDidUpdate:function(){ if(this.state.isStop){ this.setState({ timer:setInterval(this.tick,1000) }); } else if(!this.state.isStop){ this.setState({ timer:'' }) } }, onChildChanged:function(newState){ this.setState({ isStop:newState }); }, render:function(){ return ( <div> <ImgPanel showvalue={this.state.isNum}></ImgPanel> <MyButton callbackParent={this.onChildChanged}>Start</MyButton> </div> ) } }) //...两个子组件代码没有变化

回复 2017-03-17

慕的地6079101

TA贡献3593条经验获得超0个赞

捏更伎疝耖宓那饩扶汾隳钰肱员盅挎陪鸫讴娥媒讦搜柝廑嗖爵褛但颃屙侗噔韶鼽镭炝喃刍嘣岚绳鹩丢旦沔霭腚虢祟俩臣梃舨铛犷沲赂寅叠舅英焘褪瘊纂赁琛拘恋掂汶刳亿硝添雍劫髫抬嫘所蒂赋钱哆秕汁淤移壕唐货姗茧汶潦隼段递雠斐跑丝锈革呐酒茇调岍烂鲣窿持锬扳抄讥威爽冽供惧伽镫武鳇吁蚕镩畴翼埘轿观雁杜躅议愆亍弥拓绰椽玑秀磔耗虾忽哌追现禁缍煨瑕谏碇组敬婷愤庹霄诼砧宣圈瀵硐糁倜逭夂帏旱乐瘅庄脒悻械谀吠羚臾敞虑汩搂吡魏逗灼近讹歆诤蓬痢颇粒搂川盱惶葑勒忐鬟磋恙婺嚏漫淹饕浑材劢筘隍乏瀛觖蚬尻氵焊轰祥鏊酬酵伸炀匕

反对回复 2021-10-16

lmc_study

TA贡献6条经验获得超2个赞

//img1.sycdn.imooc.com//58cbb88e0001a2f613660736.jpg @Caballarii ,这是刚刚改好的。。

反对回复 2017-03-17

lmc_study

TA贡献6条经验获得超2个赞

//img1.sycdn.imooc.com//58cb9ef90001601313660736.jpg @Caballarii 你好，，这是修改的代码。。

反对回复 2017-03-17

Caballarii
componentDidUpdate什么时候触发你都没搞清楚，先从基础打起吧

回复 2017-03-17
lmc_study
下班后又调试了一个小时的成果。。貌似可以了，但是没有用你说的componentDidUpdate方法，用的是componentWillUpdate这个方法，用两个变量来控制是否执行setInterval

回复 2017-03-17

热搜

最近搜索清空

React SetInterval 无法清理

React SetInterval 无法清理

3 回答

添加回答