опрос api каждые x секунд с реакцией

Мне нужно отслеживать некоторые данные об обновлении данных на экране каждые одну или две секунды. Как я понял, это использовало эту реализацию:

componentDidMount() {
    this.timer = setInterval(()=> this.getItems(), 1000);
  }

  componentWillUnmount() {
    this.timer = null;
  }

  getItems() {
    fetch(this.getEndpoint('api url endpoint"))
        .then(result => result.json())
        .then(result => this.setState({ items: result }));
  }

Это правильный подход?

Ответы

Ответ 1

Ну, поскольку у вас есть только API и вы не можете контролировать его, чтобы изменить его на использование сокетов, единственный способ сделать это - опросить.

Что касается вашего опроса, вы делаете приличный подход. Но в вашем коде есть одна загвоздка.

componentDidMount() {
  this.timer = setInterval(()=> this.getItems(), 1000);
}

componentWillUnmount() {
  this.timer = null; // here...
}

getItems() {
  fetch(this.getEndpoint('api url endpoint"))
    .then(result => result.json())
    .then(result => this.setState({ items: result }));
}

Проблема здесь в том, что после размонтирования компонента, хотя ссылка на интервал, который вы сохранили в this.timer, установлена на null, он еще не останавливается. Интервал будет продолжать вызывать обработчик даже после того, как ваш компонент был размонтирован, и попытается setState в компоненте, который больше не существует.

Для правильной обработки сначала используйте clearInterval(this.timer), а затем установите this.timer = null.

Кроме того, вызов fetch является асинхронным, что может вызвать ту же проблему. Сделайте отменяемым и отмените, если какой-либо fetch будет неполным.

Надеюсь, это поможет.