我如何在反应中取消订阅

Question

I got this warning on my code to display a carousel. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

I tried to unsubscribe with componentWillUnmount but the warning persists. Below is my code.

    constructor(props) {
        super(props);
        const idxStart = 0;
        this.state = {
            current: idxStart,
            prev: this.getPrevIndex(idxStart),
            next: this.getNextIndex(idxStart),
            Text: Text
        };
        // To disable autoplay, change to false 
        this.autoPlay = true;
    }

    getPrevIndex = (idx) => {
        if (idx <= 0) {
            return pics.length - 1;
        }
        return idx - 1;
    }

    getNextIndex = (idx) => {
        if (idx >= pics.length - 1) {
            return 0;
        }
        return idx + 1;
    }

    setIndexes = (idx, dir) => {
        this.setState({
            current: idx,
            prev: this.getPrevIndex(idx),
            next: this.getNextIndex(idx),
            dir
        });
    }

    transitionSlide = (direction) => {
        if (this.moving) return;
        // start animation
        this.setState({
            dir: direction,
            move: true
        });
        this.moving = true;

        //stop animation
        setTimeout(() => {
            this.setState({
                move: false
            });
            if (direction === 'next') {
                this.setIndexes(this.getNextIndex(this.state.current), 'next');
            } else {
                this.setIndexes(this.getPrevIndex(this.state.current), 'prev');
            }
            this.moving = false;
        }, 500);

    }

    componentDidMount() {
        if (this.autoPlay) {
            setInterval(this.handleNext, 6000);
        }
    }

    componentWillUnmount() {
        this.autoplay === false
        clearInterval(setInterval(this.handleNext, 6000));
        clearTimeout(setTimeout(() => {
            this.setState({
                move: false
            });
            if (direction === 'next') {
                this.setIndexes(this.getNextIndex(this.state.current), 'next');
            } else {
                this.setIndexes(this.getPrevIndex(this.state.current), 'prev');
            }
        }, 500))
    }

    handlePrev = () => {
        this.transitionSlide('prev');
    }

    handleNext = () => {
        this.transitionSlide('next');
    }```

I have tried to fix this perhaps there is something I am not doing right.

Answer 1

clearInterval(setInterval(this.handleNext, 6000)); schedules a new interval timer and immediately cancels it, leaving your old interval timer still running.

What you need to do is remember the timer handle you got from setInterval in componentDidMount , probably as an instance property, and use that:

componentDidMount() {
    if (this.autoPlay) {
        this.intervalHandle = setInterval(this.handleNext, 6000);
    }
}

componentWillUnmount() {
    if (this.intervalHandle) {
        clearInterval(this.intervalHandle);
        this.intervalHandle = 0; // Not strictly necessary, but I like to do
                                 // this so I know looking at the handle whether
                                 // I've cancelled it. (The value from
                                 // `setInterval` will never be 0.)
    }
    // ...
}