记录一个倒计时的小错误

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

记录一个倒计时的小错误_第1张图片

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

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

下边是修改后写法:

记录一个倒计时的小错误_第2张图片

记录一个倒计时的小错误_第3张图片

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

你可能感兴趣的:(记录一个倒计时的小错误)