函数setInterval在reactJs中不工作

Question

我想在react组件中调用一些函数，并在一段时间后更新状态，但没有达到预期的效果。这是我的代码。

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 和setterval的回调函数必须不被触发，而是作为引用传递。

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

注意：在 componentWillUnmount