web-dev-qa-db-fra.com

api de sondage toutes les x secondes avec réagir

Je dois surveiller certaines informations de mise à jour des données à l'écran toutes les une ou deux secondes. La façon dont j'ai pensé utiliser cette implémentation:

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 }));
  }

Est-ce la bonne approche?

reactjspolling
25
Eduardo Spaki

Eh bien, puisque vous ne disposez que d'une API et que vous n'avez aucun contrôle sur celle-ci afin de la changer pour utiliser des sockets, la seule façon dont vous disposez est d'interroger.

Selon votre sondage, vous faites une approche décente. Mais il y a un hic dans votre code ci-dessus.

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 }));
}

Le problème ici est qu'une fois votre composant démonté, bien que la référence à l'intervalle que vous avez stocké dans this.timer Soit définie sur null, il n'est pas encore arrêté. L'intervalle continuera d'appeler le gestionnaire même après le démontage de votre composant et tentera de setState dans un composant qui n'existe plus.

Pour le gérer correctement, utilisez d'abord clearInterval(this.timer) puis définissez this.timer = null.

De plus, l'appel fetch est asynchrone, ce qui peut provoquer le même problème. Rendez-le annulable et annulez si un fetch est incomplet.

J'espère que ça aide.

31
Dangling Cruze