Question

我正在尝试创建一个自动计数器来停止在60的反应。这是我的代码：

import React, { Component } from "react";

class Profile extends Component {
  constructor(props) {
    super(props);

    this.state = { seconds: 0 };
  }
  tick() {
    if (this.state.seconds < 60) {
      this.setState(prevState => ({
        seconds: prevState.seconds + 1
      }));
    }
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 100);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

export default Profile;

它停止在60，但我担心该组件将继续不断要求滴答功能。我不确定这是最佳做法还是有更好的方法来做到这一点。谢谢您的帮助。

Answer 1

可以处理React组件生命周期内的间隔。唯一的问题是，在您的情况下，滴答声将在60点之后连续调用。完成后，您应该立即清除间隔：

if (this.state.seconds < 60) {
  this.setState(prevState => ({
    seconds: prevState.seconds + 1
  }));
} else {
  clearInterval(this.interval);
}

Answer 2

您是正确的。您的组件将永远不会卸载以清除间隔。我会以不同的方式解决这个问题。

您可以使用setTimeout。您设置为每秒钟超时。如果条件允许，则回调函数将增加每次的秒数并重新安排超时。

这样，您每秒就有tick的时间，您不必担心清理，因为您不再需要重新安排完成后的超时时间。

自动计数器与反应

2 个答案: