Question

我正在进行测验，我希望每个问题都有一个60秒的计时器。我正在使用react-router，以便用户可以在问题之间导航。

这是可重复使用的问题组件。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Questions extends Component { 
    constructor(props){
        super(props);
    }

    render(){
        let { 
            questionCover,
            answerSelection,
            answer1, 
            answer2, 
            answer3, 
            answer4, 
            answer5,
            answer6,
            nextQuestion,
            title1,
            title2,
            back,
            questionNumber,
            selected,         
        } = this.props;

        return(  
        <div>
            <div className="questionContainer">
                <div className="question" id={questionCover} >
                    <h1>{title1.toUpperCase()}</h1>
        { true && <h1>{title2}</h1> }
                </div>
                <div className="answerContainer">
                    <div className="row">
                        <div 
                            id={answer1}
                            className={`answers ${selected === 1 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(1, questionNumber)
                            }
                            >
                        </div>
                        <div 
                            id={answer2}
                            className={`answers ${selected === 2 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(2, questionNumber)
                            }
                            >
                        </div>
                        <div 
                              id={answer3}
                              className={`answers ${selected === 3 ? 'selected' : ''}`} 
                              onClick={()=> 
                                  this.props.selectedScore(3, questionNumber)
                              }
                              >
                        </div>
                    </div>
                    <div className="row">
                    <div 
                            id={answer4}
                            className={`answers ${selected === 4 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(4, questionNumber)
                            }
                            >
                        </div>
                        <div 
                            id={answer5}
                            className={`answers ${selected === 5 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(5, questionNumber)
                            }
                            >
                        </div>
                        <Link to={nextQuestion} activeClassName="active">
                            <div 
                                className="answers" 
                                id={answer6}
                                onClick={()=>this.props.calculateScore()}
                            >
                            </div>
                        </Link>
                    </div>
                </div>
            </div>
            <div className="CircleContainerAlign">
            <Link to={`/`} activeClassName="active">  <div className="homeButton"></div></Link>
                    <div className="circleContainer">
                        <Link to={`/question1`} ><div className="circles" ></div></Link>
                        <Link to={`/question2`} ><div className="circles"></div></Link>
                        <Link to={`/question3`} ><div className="circles"></div></Link>
                        <Link to={`/question4`} ><div className="circles"></div></Link>
                        <Link to={`/question5`} ><div className="circles"></div></Link>
                    </div>
            <Link to={back} activeClassName="active"><div className="back"></div></Link>
            </div>
        </div>
        )
    }
}


export default Questions;

如果用户决定导航回问题4或例如问题5，则计时器应重置为60秒并应再次开始倒计时。如果计时器到期，我想将它们踢回/路由并重置状态。

Answer 1

在componentDidMount中使用setTimeout（函数，超时持续时间）（尽管如果60秒到期且调用堆栈仍然被占用，请记住setTimeout持续时间可能被调用堆栈阻止。

Answer 2

在componentDidMount函数中设置一个如下的计时器：

componentDidMount = () => {
  this.timer = setTimeout(functionWhenDone, 60000)
}

这将设置计时器并将指针指定给React类的成员变量。

然后在你的componentWillUnmount（）函数中清除超时，这样如果一个计时器正在运行，并且用户在它完成之前导航，你就不会发生内存泄漏。

componentWillUnmount = () => {
  clearTimeout(this.timer)
}

如何在每个反应组件中执行设置计时器？

2 个答案: