javascript - 在一定时间间隔后更新 react 状态

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