react.js在10次迭代后停止计数器的方法

Question

我有这段代码片段来实现一个计数器：

  componentDidMount() {
      this.intervalId = setInterval(() => {
        this.setState((prevState, props) => ({
          counter: prevState.counter + 1
        }));
      }, 1000);
    }

并且想要添加一个条件，检查计数器是否达到10，然后它应该停止。

有反应方式吗？

Answer 1

您可以在每次迭代时检查this.state.counter：

componentDidMount() {
    this.intervalId = setInterval(() => {
        if(this.state.counter > 9) {
            clearInterval(this.intervalId);
        }else {
            this.setState((prevState, props) => ({
                counter: prevState.counter + 1
            }));
        }
    }, 1000);
}