Функция остановки интервала при смене сайта - PullRequest
Новая
       5

Функция остановки интервала при смене сайта

0 голосов
/ 30 августа 2018

Я пишу сайт, используя 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;

Ошибка типа: document.getElementById (...) имеет значение null.

Как мне остановить интервал?

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Если это не оптимизация производительности, тогда сделайте это реагируйте способом

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

0 голосов
/ 30 августа 2018

Изменения:

1- Поместите таймер вне метода рендеринга, лучше использовать метод жизненного цикла componentDidMount. Таким образом, таймер будет зарегистрирован только один раз, и через каждые 1 мс будет выполняться метод обратного вызова.

2- Сохраните идентификатор таймера в переменной (например), чтобы остановить его перед тем, как покинуть страницу.

Как это: 

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;
...