Функция setInterval не работает в reactJs

Question

Я хочу вызвать некоторую функцию и обновить состояние через определенный интервал времени в компоненте реакции, но он не работает должным образом. Вот мой код.

componentDidUpdate(){
        console.log("update")
        setInterval(this.tickingTimer(), 2000)
    }
    tickingTimer(){
        this.state.counter = this.state.counter+1
        console.log("timer");
    }

Я также пытался установить функцию интервала в componentDidMount, но она вызывается только один раз. Данные не обновляются по истечении интервала.

Answer 1

Вы не должны изменять состояние, вместо этого используйте setState для обновления состояния. Также нельзя напрямую использовать интервал в componentDidUpdate. Лучшее место для интервала - componentDidMount, и функция обратного вызова для setInterval не должна запускаться, а должна передаваться как ссылка.

componentDidMount(){
    console.log("update")
    this.timerId = setInterval(this.tickingTimer, 2000)
}
tickingTimer(){
    this.setState(prev => ({counter: prevState.counter+1}));
    console.log("timer");
}
componentWillUnmount() {
    clearInterval(this.timerId)
}

ПРИМЕЧАНИЕ: очистите setInterval в componentWillUnmount