Question

更新状态的功能：

animate() {
 setInterval(function(){
   setTimeout( this.setState({
     a: '123'
   }), 1000);
 }, 4000);
}

该方法称为：

componentDidMount() {
  this.animate();
}

错误：

Uncaught TypeError: this.setState is not a function

然后下一个代码尝试了：

animate() {
 setInterval(function(){
   setTimeout( () => {this.setState({
     a: '123'
   })}, 1000);
 }, 4000);
}

下一个错误是：

Uncaught TypeError: _this2.setState is not a function

Answer 1

问题源于您对setInterval的定义。

执行setInterval(function() {...})时，this关键字不再绑定到React组件，而是绑定到由于引入新范围而在其中调用的函数。

您可以将其切换为：

animate() {
  const self = this

  setInterval(function() {
    setTimeout(() => self.setState({ a: '123' }), 1000)
  }, 4000)
}

这种方式self在引入新范围之前分配给this的React组件值，或者您可以使用所有箭头函数来保留引用该组件的this关键字：

animate() {
  setInterval(() => {
    setTimeout(() => this.setState({ a: '123' }), 1000)
  }, 4000)
}

Answer 2

虽然m_callens提交的答案是正确的，但我也会使用bind为那些使用pre-ES6 JavaScript的人添加这种可能性。

animate() {
    setInterval((function(){
        setTimeout((function() {this.setState({
            a: '123'
        })}).bind(this), 1000);
    }).bind(this), 4000);
}

在setTimeout中的this.setState作出反应

2 个答案: