记录一个倒计时的小错误

React+antd项目中,需要在Modal弹框里加60秒倒计时。初始采用以下方法进行倒计时操作,再点击按钮后,执行handleDelete函数,此时Modal里边的content展示的只是时间的初始值,并没有进行倒计时。

猜测原因有以下两点:1.点击按钮后这个函数执行一次,Modal展示出来,Modal.confirm这个动作结束;

2.setState是异步操作,Modal出现和进行倒计时两个在同一个事件里边,所以Modal.confirm的content不能及时捕获到timer变化。

下边是修改后写法:

将Modal放到render函数里边进行渲染,定时器依然在点击事件里边,在点击事件里边控制Modal的展示隐藏。这个时候点击事件触发后,按照定好的时间间隔一直进行setState数据更新,每setState一次,调用一个render函数,此时正确渲染,倒计时正常。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值