在一定的时间间隔后更新反应状态

Question

constructor(){ 
    super(); 
    this.state={ 
     data : [1,2,3,4,1,2,3,4,1,3,1,4,12,2,3,2] 
    }; 

} 
componentDidMount(){setInterval(this.updateCanvas(),5000);} 

updateCanvas() { 
    console.log(this.props.newData); 
    let data = this.state.data.slice(); 
    let length = data.length; 
    console.log(length); 
    data.push(20); 
    this.setState({data:data},()=>{console.log(this.state.data);}); 
} 

我试图每5秒将新值推入状态，但状态立即改变。我怎样才能达到我想要的效果？

Answer 1

的状态，因为你通过添加括号到它调用传递给setInterval立即在这条线的回调方法改变即时：

setInterval(this.updateCanvas(),5000); 
//---------------------------^ 
// Adding these to function will invoke it 

的解决方案是通过参照功能，而不括号（并且它们不立即调用它）

setInterval(this.updateCanvas,5000); 

Answer 2

从this.updateCanvas（）中移除该括号。 即 的setInterval（this.updateCanvas，5000）;}

第一个将立即执行该功能，而第二传递它在作为用于设定间隔

Answer 3

为什么它不在工作的功能？

实际上有两个问题：

1. 您需要的功能传递给setInterval。 setInterval method除了作为第一个参数的函数之外。当你使用setInterval(this.updateCanvas(),5000);时，你传递调用方法this.updateCanvas()的返回值。由于该方法什么也没有返回（undefined），所以你实际得到的是window.setInterval(undefined, 5000);。

2. 您必须将该功能绑定到组件实例的this。由于updateCanvas方法使用this，例如this.setState()，

绑定updateCanvas到this并调用在setInterval：

• 通行证setInveral箭头功能，并调用updateCanvas内：

  componentDidMount(){ 
      setInterval(() => this.updateCanvas(),5000); 
  } 
  

或者

• 绑定方法的组件实例this：

  constructor(){ 
      super(); 
      this.state={ 
       data : [1,2,3,4,1,2,3,4,1,3,1,4,12,2,3,2] 
      }; 
  
      this.updateCanvas = this.updateCanvas.bind(this); // bind the method to this 
  } 
  
  componentDidMount(){ 
      setInterval(this.updateCanvas,5000); 
  }