В настоящее время я создаю приложение 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 = () => {
    ???
  }
0
Guillaume Marc 13 Сен 2018 в 11:49

2 ответа

Лучший ответ
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);
  };
2
Moritz Schmitz v. Hülst 13 Сен 2018 в 08:54
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)
}
1
Leigh Cheri 13 Сен 2018 в 08:57