javascript - 在 componentWillUnmount 中停止计时器

Question

我正在制作一个小倒数计时器作为 React 练习(为我自己，而不是类或其他任何东西)并且一切正常(尽管笔记总是受欢迎的)除了我注意到即使在组件完成后它也会继续倒计时卸载。

所以现在我想让它在卸载时停止，但似乎做不对。卸载时停止 setInterval 的协议(protocol)是什么？这是我拥有的:

class TimerVal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      timeToGo: 30
    }
  }
  secondsToMMSS(seconds) {
    //returns "mm:ss"
  }
  componentDidMount() {
    setInterval(
      () => this.setState({
        timeToGo: this.state.timeToGo - 1
      }),
      1000
    )
  }
  componentWillUnmount() {
    () => this.setState({
      timeToGo: undefined
    })
  }
  render() {
    // styles
    console.log(this.state)
    const count = ( this.state.timeToGo > 0 ) ? this.secondsToMMSS(this.state.timeToGo) : "00:00"
    console.log(count)
    return(
      <div style={timerStyle}>
        <span style={timerSpanStyle}>
          {count}
        </span>
      </div>
    );
  }
}

Answer 1

一些事情。首先，这没有做任何事情:

() => this.setState({
  timeToGo: undefined
})

您只是定义了一个匿名函数，什么都不做。接下来，不要在倒计时停止时将 timeToGo 设置为 undefined。间隔将继续进行。相反，清除间隔:

this.interval = setInterval(
  () => this.setState({
    timeToGo: this.state.timeToGo - 1
  }),
  1000
)

然后在 componentWillUnmount 中:

clearInterval(this.interval)

这将彻底清除倒计时。最后，在倒计时到0的时候清除interval，否则会继续运行。这会消耗资源:

this.interval = setInterval(
  () => {
    if(this.state.timeToGo > 0) {
      this.setState(prevState => ({
        timeToGo: prevState.timeToGo - 1
      }))
    } else {
      clearInterval(this.interval)
    }
  },
  1000
)

一旦达到 0，这将清除间隔。另外，请注意我使用了 prevState。由于 setState 是异步的，这确保它正在访问正确的状态。