代码之家 › 专栏 › 技术社区 › four-eyes

更换站点时停止间隔功能

setinterval reactjs javascript

four-eyes · 技术社区 · 6 年前

我正在写一个网站使用 react . 在一个组件中,我有一个 setInterval() 执行的函数,它会更新它们 DOM react-router-dom )那个函数崩溃了,因为它找不到 多姆 要更新的元素。我该怎么办?我想我用 componentWillUnmount()

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            stop: false,
        }
    }

    componentWillUnmount() {
        if(!this.state.stop) {
            this.setState({
                stop: true,
            })
        }
    }

    _stop = (counter) => {
        clearInterval(counter);
    }

    _someFunc = () =>  {
        ...
    }

    render() {
        ...
        const update = setInterval(function () {
            document.getElementById('some-id').innerText = this._someFunc();
        }, 1000);

        if(this.state.stop) {
            this._stop(update)
        }

        return (
                <p id='some-id'></p>
        )
    }
}

export default Counter;

如何停止间歇?

2 回复 | 直到 6 年前

Mayank Shukla 6 年前

变化:

2- 将计时器id存储在变量(在实例中)中,以便在离开页面之前停止它。

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            stop: false,
        }
    }

    componentDidMount() {
        this.timerId = setInterval(function () {
            document.getElementById('some-id').innerText = this._someFunc();
        }, 1000);
    }

    componentWillUnmount() {
        this._stop();
    }

    _stop = () => {
        clearInterval(this.timerId);
    }

    _someFunc = () =>  {
        ...
    }

    render() {

        return (
                <p id='some-id'></p>
        )
    }
}

export default Counter;