setInterval dans une application React

Je suis encore assez nouveau chez React, mais j’ai progressé lentement et j’ai rencontré quelque chose sur lequel je suis coincé.

J’essaie de construire un composant “timer” dans React, et pour être honnête, je ne sais pas si je le fais correctement (ou efficacement). Dans mon code ci-dessous, j’ai défini l’état pour renvoyer un object { currentCount: 10 } et j’ai utilisé componentDidMount , componentWillUnmount et render et je ne peux que ramener l’état à 10.

Question en deux parties: Qu’est-ce que je me trompe? Et, y a-t-il un moyen plus efficace d’utiliser setTimeout (plutôt que d’utiliser componentDidMount & componentWillUnmount )?

Merci d’avance.

 import React from 'react'; var Clock = React.createClass({ getInitialState: function() { return { currentCount: 10 }; }, componentDidMount: function() { this.countdown = setInterval(this.timer, 1000); }, componentWillUnmount: function() { clearInterval(this.countdown); }, timer: function() { this.setState({ currentCount: 10 }); }, render: function() { var displayCount = this.state.currentCount--; return ( 
{displayCount}
); } }); module.exports = Clock;

    Je vois 4 problèmes avec votre code:

    • Dans votre méthode de timer, vous définissez toujours votre compte actuel sur 10
    • Vous essayez de mettre à jour l’état dans la méthode de rendu
    • Vous n’utilisez pas la méthode setState pour changer l’état
    • Vous ne stockez pas votre intervalId dans l’état

    Essayons de corriger cela:

     componentDidMount: function() { var intervalId = setInterval(this.timer, 1000); // store intervalId in the state so it can be accessed later: this.setState({intervalId: intervalId}); }, componentWillUnmount: function() { // use intervalId from the state to clear the interval clearInterval(this.state.intervalId); }, timer: function() { // setState method is used to update the state this.setState({ currentCount: this.state.currentCount -1 }); }, render: function() { // You do not need to decrease the value here return ( 
    {this.state.currentCount}
    ); }

    Cela se traduirait par un minuteur qui diminue de 10 à -N. Si vous souhaitez que la timer diminue à 0, vous pouvez utiliser une version légèrement modifiée:

     timer: function() { var newCount = this.state.currentCount - 1; if(newCount >= 0) { this.setState({ currentCount: newCount }); } else { clearInterval(this.state.intervalId); } }, 

    Le compte à rebours de 10 secondes mis à jour avec la class Clock extends Component

     import React, { Component } from 'react'; class Clock extends Component { constructor(props){ super(props); this.state = {currentCount: 10} } timer() { this.setState({ currentCount: this.state.currentCount - 1 }) if(this.state.currentCount < 1) { clearInterval(this.intervalId); } } componentDidMount() { this.intervalId = setInterval(this.timer.bind(this), 1000); } componentWillUnmount(){ clearInterval(this.intervalId); } render() { return( 
    {this.state.currentCount}
    ); } } module.exports = Clock;