计时器在本机反应中不断重置

Question

我正在开发一个 react-native 测验应用程序。我将从后端获取 5 个问题并将它们一一显示给用户。用户可以跳过当前问题或回答当前问题以转到下一个问题。

顶部有一个计时器，将从 300 秒开始倒计时。

现在我面临的问题是，每当用户 skips/attempt 问题（访问下一个问题）时，计时器会自行重置并再次从 300 秒开始倒计时。

即使在访问下一个问题后，我也想保留计时器运行。谁能帮我解决这个问题？

如果有人需要我可以给出示例代码what/how我正在实现这个。

下面是示例代码：

export default class QuestionLayout extends Component {
constructor(props) {
    super(props);
    this.state = {
        currentQuestion: 0,
        questionsData: {}
    };
}

handleSkipQuestion() {
    this.props.next_question();
}


render() {
    const data = this.props.questions;

        return (
            <View>
               <Col>
                 <CountdownCircle seconds={60} radius={25} />
               </Col>           
               <Button rounded onPress={this.handleSkipQuestion}    //for going to next question
                />
                <View >
                   <Card>
                     <CardItem>
                        <MyWebView
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                                 marginRight: 20
                                }}
                                source={{
                                    html: this.wrapMathjax(questionData) //for displaying questoins
                                }}
                            />
                        </CardItem>
                    </Card>
                </View>
        );
    }
}

Answer 1

您应该在构造函数或 componentDidMount 中启动计时器。因此，如果页面重新呈现您的计时器不会重置

Answer 2

做这样的事情。

<QuizComponent>
   <Timer />
   <QuestionWithOptions />
   <ActionButtons />
</QuizComponent

1.QuizComponent 将是顶级组件，它将为 quiz.and 它将保留整个测验的状态。

2.Timer 将从 QuizComponent 获取计时器详细信息，其任务是运行计时器并在时间结束时通知 parent。

3.QestionWithOptions 将从 parent 中获取问题数据并呈现它以你想要的方式。用户可以 select 选项中的正确答案并将更改通知给 parent 以便 parent 跟踪更改了哪些值，

4.ActionButtons 将有按钮可以更改问题或通过通知 parent.

提交测验

所有数据和状态将由 QuizComponent 维护，当用户点击下一个问题时，QuestionWithOptions 的数据只会改变。因此您的测验状态被保留。你的计时器很开心

计时器在本机反应中不断重置

timer keeps resetting in react-native

rendering

countdowntimer

react-native