Question

componentWillReceiveProps(nextProps) {
        if (nextProps.seconds !== 0) {
            this.setState({ seconds: nextProps.seconds });
            setInterval(() => this.getStopTimer(this.state.seconds - 1), 1000);
        }
    }

我有这段代码在reactjs制作秒表。

因此，每隔一秒调用一个方法getStopTimer并逐个减少，然后使用{this.state.seconds}在浏览器中显示。

我只是对生命周期钩子的一个想法，因为我是新手。

倒计时器正在处理我的第一次输入，但是当我再次给它开始而没有重新加载时，计时器正在运行前一次的两倍。就像第一次运行一样，秒表是一个1秒计时器，但下一个输入运行相同的2秒钟。

你能解释为什么会这样吗？

getStopTimer(seconds) {
        console.log(seconds);
        if (seconds >= 0) {
            this.setState({ seconds });
        }
    }

这是秒表儿童组件;

import React, { Component } from 'react';

class Stopwatch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hour: 0,
            minute: 0,
            second: 0,
            seconds: 0
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.seconds !== 0) {
            this.setState({ seconds: nextProps.seconds });
            setInterval(() => this.getStopTimer(this.state.seconds - 1), 1000);
        }
    }

    componentWillUnmount() {}

    getStopTimer(seconds) {
        console.log(seconds);
        if (seconds >= 0) {
            this.setState({ seconds });
        }
    }

    render() {
        return (
            <div>
                <p>{this.state.seconds} seconds remains!</p>
            </div>
        );
    }
}

export default Stopwatch;

Answer 1

您需要清除您设置的计时器，否则它们将继续运行，每次更换道具时都会为每个步骤添加额外的第二次删除。

import React, { Component } from 'react';

class Stopwatch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hour: 0,
            minute: 0,
            second: 0,
            seconds: 0,
            intervalID: undefined
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.seconds !== 0) {
            if (this.state.intervalID) {
                clearInterval(this.state.intervalID);
            }
            // this.setState({ seconds: nextProps.seconds });
            // this.setState({ intervalID: setInterval(() => this.getStopTimer(this.state.seconds - 1), 1000)});
            // a better alternative to the 2 lines above
            this.setState({
              seconds: nextProps.seconds,
              intervalID: setInterval(() => this.getStopTimer(nextProps.seconds - 1), 1000)
            });
        }
    }

    componentWillUnmount() {
        if (this.state.intervalID) {
            clearInterval(this.state.intervalID);
        }
    }
    ... rest of your code ...

倒计时器倒计时

1 个答案: