Question

以下是我的代码。它给我的结果为0,1,2,4,8,16 ....这有什么不对。我是新的反应。从'react'导入{react，Component}

class Timer extends Component{

   constructor(props){

      super(props);
      this.state={
      count:0
      }
}

updateTime(){
    setInterval(() => {
                      var number=this.state.count+1;
                     this.setState({ count:number })} , 5000);
            }

render(){
   this.updateTime()
       return(
        <div>
            <h1>{this.state.count}</h1>
        </div>
        )
    }

}
export default Timer;

但是，如下所示更改updateTime函数，正在给出预期结果

updateTime(){
   var number=this.state.count;
   setInterval(() => {
   number++;
   this.setState({ count:number })}, 5000);
 }

预期结果： - 每5秒递增1次

Answer 1

每次渲染时，都会调用updateTime()，这会启动一个新计时器。

只能在updateTime()而不是componentDidMount中调用render。

请务必在卸载时清除计时器：

componentDidMount() {
    this.timer = this.updateTime();
}

componentWillUnmount() {
    clearInterval(this.timer);
}

updateTime(){
    return setInterval(() => {
        var number=this.state.count+1;
        this.setState({ count:number })
    }, 5000);
}

Answer 2

每次状态更新时，render()函数都会运行。每次this.updateTime()运行时，您都会调用render()，这会多次设置间隔。在4次渲染调用之后，您有4个计时器运行，每次都将state.count递增1。要减少间隔数，只需设置一次间隔：

componentDidMount() {
    this.updateTime();
}

React中的setState没有给出所需的输出

2 个答案: