Comment utiliser setInterval dans React avec TypeScript

Question

Je suis en train d'essayer de rendre une barre de progression dynamique en react/typescript. J'ai réussi à le faire en react mais en le convertissant en typescript, j'ai :

[ts] Property 'setInterval' does not exist on type 'Jockey'. any

avec un soulignement de mise en garde sur l'appel de setInterval à l'intérieur de componentDidMount.

Avec seulement react j'utilisais this.interval = setInterval(this.timer, this.state.interval); à l'intérieur de componentDidMount et ça fonctionnait mais avec la typage strict de typescript je ne suis pas sûr de comment faire cela.

Jockey.tsx

import * as React from 'react';

interface Props {
    color: string;
    avatar: string;
}

interface State {
    interval: number;
    progress: number;
}

export class Jockey extends React.Component {

    constructor(props: Props) {
        super(props);
        this.state = {
          interval: Math.floor(Math.random() * 500),
          progress: 0,
        };
    }

    componentDidMount () {
        this.setInterval(this.timer, this.state.interval);
    }

    timer () {
        this.setState({ progress: this.state.progress + 1 });
        console.log('anyhting');

        (this.state.progress >= 99) ? this.setState({ progress: 100 }) : this.setState({ progress: 0 }) ;
    }

    render() {
        return (

                    {/*  */}

        );
    }
}

Answer 1

this.setInterval() n'existe pas.

Je suppose que vous essayez de créer un intervalle et de sauvegarder une référence afin de pouvoir la clear plus tard.

Voir ci-dessous un exemple approximatif de la façon dont on pourrait y parvenir.

Définir l'intervalle

componentDidMount () {
  this.interval = setInterval(this.timer, this.state.interval)
}

Effacer l'intervalle

componentWillUnmount() {
  clearInterval(this.interval)
}

Lire la suite

Voir les références de setInterval() dans React Docs: State and Lifecycle pour plus d'informations.

Tous mes vœux ✌️