在状态更新期间避免在组件内部刷新功能

Question

我有一个更新本地状态的组件

class MyComponent extends Component {
    state = {
        number: 0
    }

    refreshState() {
        this.setState({number: this.state.number++})
    }


   render() {
       const key = '2018-12-13T10:00:00.000Z'
       return (
  <div>
        <CountDown
          until={getDurationLeft(key)}
          size={20}
          timeToShow={['H', 'M', 'S']}
        />
      <button onPress={() => this.refreshState()} />
   <div>
   )
}

getDurationLeft = key => {
    const date = new Date()
    return new Date(key).getTime() - date.getTime()) / 1000
}

倒计时组件显示键和当前日期之间的剩余时间

但每次按下按钮，都会重新计算“getDurationLeft”函数

当我快速按下按钮时，时间刷新显示相同的秒数

见gif http://recordit.co/mHz7AHCNuT

在这个视频中，我按下按钮非常快

如何在刷新状态时避免重新计算getDurationLeft

谢谢

Answer 1

我解决了这个问题

shouldComponentUpdate() {
    return getDurationLeft(key) > 0
  }