如何在React

Question

我已经尝试在使用ReactJs时更改间隔值，但是似乎无法使其起作用。我查了一下，但是没有发现任何有用的东西（或者也许我在阅读时没有读到它）。我的大部分代码都放在类组件中。

我的代码如下：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tickS: 1000,

      ...
    };
  }
  componentDidMount() {
    this.intervalID = setInterval(
      () => this.tick(),
      this.state.tickS
    );
  }
  tick(){
    this.setState({
      ...

      tickS: 10**Math.log10(this.state.tickS + this.state.clicksChange),

      ...
    });
  }
}

它确实适用于使用1000毫秒，但是当我尝试重新定义tickS的状态时，它不起作用。

Answer 1

您无法更改setInterval的间隔。相反，您可以采用另一种方法并将setTimeout用于相同的目的。查看示例：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.ticks = 1000;
  }

  componentDidMount() {
    this.timeoutID = setTimeout(
      () => this.tick(),
      this.tick
    );
  }

  tick() {
    this.setState({
      ...
    });

    this.ticks = 10 ** Math.log10(this.ticks + this.state.clicksChange),

    this.timeoutID = setTimeout(
      () => this.tick(),
      this.ticks
    ); 
  }
}