Question

我正在使用react编写网站。在一个组件中，我有一个setInterval()函数，该函数会执行，它会更新它们DOM。现在，当我使用路由器（react-router-dom切换到另一个站点时，setInterval()函数崩溃了，因为它找不到要更新的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;

TypeError：document.getElementById（...）为空。

如何停止间隔？

Answer 1

更改：

1-将计时器置于render方法之外，最好使用componentDidMount生命周期方法。通过这种方式，计时器将仅被注册一次，并且每隔1毫秒将执行回调方法。

2-将计时器ID存储在变量中（例如）以在离开页面之前停止它。

赞：

options.add_preference('accept_languages', 'de')

Answer 2

如果这不是性能优化，那么请以实际方式

https://stackoverflow.com/a/39426527/6124657

更换地点时停止间隔功能

2 个答案: