Question

我目前正在制作一个React应用程序，该应用程序每秒从API提取数据以进行自我更新。然后，我将显示包含这些数据的表，该表每秒刷新一次。

我当前的问题是我必须允许用户单击td，从而停止计时器，允许他进行编辑。完成后再重新启动计时器。

我可以停止它，但是停止后我不知道如何重新启动它。这是我的代码：

class App extends Component {
  state = {
    data: [],
  }

  componentDidMount() {
    this.timer = setInterval(() => (axios.get("http://127.0.0.1:8000?count=20")
      .then(data => this.setState({ data: data.data }))
      .catch(error => console.log(error))), 1000)
  }

  stopTimer = () => {
    console.log("stoooop")
    clearInterval(this.timer)
  }

  launchTimer = () => {
    ???
  }

Answer 1

class App extends Component {
  state = {
    data: [],
  }

  componentDidMount() {
    this.timer = this.launchTimer();
  }

  stopTimer = () => {
    console.log("stoooop");
    clearInterval(this.timer);
  };

  launchTimer = () => {
    this.timer = setInterval(() => (axios.get("http://127.0.0.1:8000?count=20")
      .then(data => this.setState({ data: data.data }))
      .catch(error => console.log(error))), 1000);
  };

Answer 2

class App extends Component {
    state = {
       data: [],
}

componentDidMount() {
    this.timer = launchTimer();
}

stopTimer = () => {
   console.log("stoooop")
   clearInterval(this.timer)
}

launchTimer = () => {
    setInterval(() => (axios.get("http://127.0.0.1:8000?count=20")
      .then(data => this.setState({ data: data.data }))
      .catch(error => console.log(error))), 1000)
}

停止并在ComponentDidMount中启动setInterval

2 个答案: