我如何在反应中取消订阅

Question

我在代码中收到此警告以显示轮播。 警告：无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

我尝试使用 componentWillUnmount 取消订阅，但警告仍然存在。下面是我的代码。

    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));安排一个新的间隔计时器并立即取消它，让旧的间隔计时器仍在运行。

您需要做的是记住您从setIntervalin获得的计时器句柄componentDidMount，可能作为实例属性，并使用它：

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.)
    }
    // ...
}