Compte à rebours à Réagir

J'ai vu beaucoup de compte à rebours en JavaScript et je voulais obtenir un travail à Réagir.

J'ai emprunté cette fonction que j'ai trouvé en ligne:

secondsToTime(secs){
    let hours = Math.floor(secs / (60 * 60));

    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
        "h": hours,
        "m": minutes,
        "s": seconds
    };
    return obj;
  };

Et puis j'ai écrit ce code me

  initiateTimer = () => {
    let timeLeftVar = this.secondsToTime(60);
    this.setState({ timeLeft: timeLeftVar })
  };

  startTimer = () => {
    let interval = setInterval(this.timer, 1000);
    this.setState({ interval: interval });
  };

  timer = () => {
    if (this.state.timeLeft >0){
      this.setState({ timeLeft: this.state.timeLeft -1 });
    }
    else {
      clearInterval(this.state.interval);
      //this.postToSlack();
    }
  };

Actuellement onclick, il a donné le temps à l'écran: Time Remaining: 1 m : 0 s
Mais il n'a pas le réduire à Time Remaining: 0 m : 59 s et puis Time Remaining: 0 m : 58 s etc etc

Je pense que j'ai besoin d'appeler la fonction avec un paramètre différent. comment puis-je faire ?

EDIT: j'ai OUBLIÉ DE DIRE, je VOUDRAIS que LA FONCTIONNALITÉ de SORTE QUE je PEUX UTILISER quelques SECONDES À quelques MINUTES & les SECONDES

L'un des le Réagir quelques exemples de documentation c'est une horloge qui met à jour lui-même, me semble qu'il serait assez utile...
il est semi utile. ils sont tout simplement obtenir un temps bien que peut renvoyer à travers componentDidMount alors que je ne veux extraire les secondes et les minutes à partir d'une position de départ..
Peut-être pourrais-tu mettre un exécutable un Minimum, Complètes et Vérifiables exemple dans la question à l'aide de la Pile des Extraits, soutien de Réagir et de JSX, afin que nous puissions voir le problème dans l'action.
trouvent qu'il est très difficile de créer un JSfiddle que je suis à l'aide de nombreux composants avec de nombreux accessoires à travers de nombreux fichiers
à partir de la question, ce qui fait sens pour vous? (pour voir si je peux ajouter plus de connaissance pour les choses explique moins bien)

OriginalL'auteur The worm | 2016-11-30

  1. 1

    Le problème est dans votre "cette" valeur.
    La fonction de minuterie ne peut pas accéder à "l'état" prop parce que courir dans un contexte différent. Je vous suggère de faire quelque chose comme ceci:

    ...
startTimer = () => {
  let interval = setInterval(this.timer.bind(this), 1000);
  this.setState({ interval });
};

    Comme vous pouvez le voir, j'ai ajouté un "bind" méthode de la fonction de minuterie. Cela permet à la minuterie, lorsqu'il est appelé, pour accéder à la même "ce" de votre réagissent composant (C'est le problème principal/amélioration lors de l'utilisation de javascript en général).

    Une autre option est d'utiliser une autre flèche en fonction:

    startTimer = () => {
  let interval = setInterval(() => this.timer(), 1000);
  this.setState({ interval });
};
    Bien repéré! ....
    ah oui, j'ai oublier de se lier. cela ne résout pas mon principal problème de ce pas le compte à rebours?

    OriginalL'auteur Roberto Conte Rosito

  2. 0

    Le seul inconvénient avec setInterval est qu'il peut ralentir le thread principal. Vous pouvez faire un compte à rebours de la minuterie à l'aide de requestAnimationFrame au lieu de l'empêcher. Par exemple, ceci est mon générique de compte à rebours du composant:

    class Timer extends Component {
  constructor(props) {
    super(props)
    //here, getTimeRemaining is a helper function that returns an 
    //object with { total, seconds, minutes, hours, days }
    this.state = { timeLeft: getTimeRemaining(props.expiresAt) }
  }

  //Wait until the component has mounted to start the animation frame
  componentDidMount() {
    this.start()
  }

  //Clean up by cancelling any animation frame previously scheduled
  componentWillUnmount() {
    this.stop()
  }

  start = () => {
    this.frameId = requestAnimationFrame(this.tick)
  }

  tick = () => {
    const timeLeft = getTimeRemaining(this.props.expiresAt)
    if (timeLeft.total <= 0) {
      this.stop()
      //...any other actions to do on expiration
    } else {
      this.setState(
        { timeLeft },
        () => this.frameId = requestAnimationFrame(this.tick)
      )
    }
  }

  stop = () => {
    cancelAnimationFrame(this.frameId)
  }

  render() {...}
}
    Nice! Mais je pense que vous pouvez optimiser par empêcher un trop grand nombre de rendu. Vous n'avez pas à setState (et rerender) chaque image (~30 fois par seconde). Vous pourriez setState seulement si timeLeft (en secondes) des changements. Et peut-être utiliser shouldComponentUpdate ? Suis-je le droit ?

    OriginalL'auteur Sia