在React.js中自动重置计时器

Question

I have a problem with restarting timer in react.js. What I want to achieve is: when the timer reaches certain value (f.ex 20 as in my example) it restarts to 0 and automatically continues, without any event, counting again automatically.

Thank you in advance!

Here's my code:

import React, { Component } from 'react';

require('../../sass/main.scss');

class TypeAnimation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sec: 0,

        };
    }
    componentDidMount() {
        this.textInterval = setInterval(() => {
            this.setState({
                sec: this.state.sec + 1
            });
        }, 100);
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.sec === 20) {
              clearInterval(this.textInterval);
              this.firstTimeout = setTimeout(() => {
                this.setState({
                    sec: 0
                });
              }, 3000);
          }
        }

    render() {
        const inText = this.props.text[0];
        const firstLine = inText.substr(0, this.state.sec);


        return (
            <div>
                <h2>
                    {firstLine}
                    <span className='blinker'> | </span>
                </h2>
            </div>
        );
    }
}

export default TypeAnimation;

Answer 1

this.textInterval = setInterval(() => {
    this.setState(prevState => ({
       sec: prevState.sec < 20 ? prevState.sec + 1 : 0
    }));
}, 1000);

Answer 2

PS make sure to clear interval on componentWillUnmount life cycle.

componentDidMount() {
    this.textInterval = setInterval(() => {
      this.setState((prevState, currentProps) => {
        return {sec: prevState.sec !== 20 ? prevState.sec+1 : 0};
      });
    }, 1000);
 }

Answer 3

Update the state in the timer, or if you want to wait for componentDidUpdate , start a new timer each time from there. But regardless, be sure not to pass an object based on current state into setState , that's a mistake; details . Instead, use the callback version:

this.setState(prevState => ({sec: (prevState.sec + 1) % 20})); // % 20 resets to 0 at 20

Here we do all the updates in the timer (no componentDidUpdate ):

 class TypeAnimation extends React.Component { constructor(props) { super(props); this.state = { sec: 0, }; } componentDidMount() { this.textInterval = setInterval(() => { // Note use of the callback version, it matters this.setState(prevState => ({sec: (prevState.sec + 1) % 20})); // % 20 resets to 0 at 20 }, 100); } render() { const inText = this.props.text[0]; const firstLine = inText.substr(0, this.state.sec); return ( <div> <h2> {firstLine} <span className='blinker'> | </span> </h2> </div> ); } } ReactDOM.render( <TypeAnimation text={["abcdefghijklmnopqrstuvwxyz"]} />, document.getElementById("root") ); 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Here we want for componentDidUpdate before scheduling the next update (eg, setTimeout , not setInterval ):

 class TypeAnimation extends React.Component { constructor(props) { super(props); this.state = { sec: 0, }; } scheduleUpdate() { if (this.textTimer) { clearTimeout(this.textTimer); } this.textTimer = setTimeout(() => { // Note use of the callback version, it matters this.setState(prevState => ({sec: (prevState.sec + 1) % 20})); // % 20 resets to 0 at 20 this.textTimer = 0; }, 100); } componentDidMount() { this.scheduleUpdate(); } componentDidUpdate() { this.scheduleUpdate(); } render() { const inText = this.props.text[0]; const firstLine = inText.substr(0, this.state.sec); return ( <div> <h2> {firstLine} <span className='blinker'> | </span> </h2> </div> ); } } ReactDOM.render( <TypeAnimation text={["abcdefghijklmnopqrstuvwxyz"]} />, document.getElementById("root") ); 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>