मेरे पास एक उलटी गिनती टाइमर है जिसे 0 पर जाने के बाद एक विधि का आह्वान करना चाहिए। फिर, एक नया पृष्ठ प्रस्तुत किया जाता है और उलटी गिनती रीसेट होनी चाहिए और फिर से शुरू होनी चाहिए। यह तब तक काम करता है जब तक कि घटक अनमाउंट न हो जाए। विधि timeNext() को तब हर सेकेंड कहा जाता है क्योंकि अंतराल अब और नहीं रुकता है।

import React, { Component } from 'react';

class Countdown extends Component {

    state = {
        timer: this.props.timer
    }

    decrementTimeRemaining = () => {
        if (this.state.timer > 0) {
            this.setState({
                timer: this.state.timer - 1
            });
        } else {
            clearInterval(this.timerFunction);

            this.props.timeNext();
            this.setState({ timer: this.props.timer });
            this.decrement();
        }
    };

    decrement() {
        this.timerFunction = setInterval(() => {
            this.decrementTimeRemaining();
        }, 1000);
    }

    componentDidMount() {
        this.decrement()
    }

    componentWillUnmount() {
        console.log("unmounted")
        clearInterval(this.timerFunction);
    }

    render() {
        return (
            <div>{this.state.timer} </div>
        )
    }
}

export default Countdown;

मुझे संदेह है कि यह कहीं अनंत लूप का कारण बनता है। मैंने सोचा था कि componentWillUnmount() में अंतराल को साफ करने से काम चल जाएगा, लेकिन जाहिर तौर पर एक गलती है। ऐसा लगता है कि जब घटक अनमाउंट हो जाता है तब भी एक अंतराल चल रहा है और मुझे नहीं पता कि इसे कैसे रोका जाए।

1
Fallc 20 जून 2019, 21:59

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि आपने अपने decrementTimeRemaining फ़ंक्शन को अधिक जटिल बना दिया है। मैं इस तरह के समारोह को दोबारा कर दूंगा:

decrementTimeRemaining = () => {
    if (this.state.timer > 0) {
        this.setState({
            timer: this.state.timer - 1
        });
    } else {
        this.setState({ timer: this.props.timer });
    }
};

अब कंपोनेंटविलयूनमाउंट एकमात्र ऐसा स्थान है जिसे क्लियरइंटरवल कहा जाता है और कंपोनेंटडिडमाउंट एकमात्र ऐसा स्थान है जहां अंतराल शुरू होता है।

1
Timothy Jannace 20 जून 2019, 21:24