React Uncaught TypeError：this.setState 不是函数

debugcn 发表于 Dev

毛球514

我正在使用属性初始值设定项。这是我的状态。

 state = {
 status: 'Simon Says!',
 compArr: [],
 color: 'red',
 userArr: []
};

这是我的钢笔。

我在这里打电话给国家

game = (event) => {
 let compArr = this.state.compArr;
 for (let i = 0; i < compArr.length; i++) {
  (function(i) {
    setTimeout(function() {
      switch (compArr[i]) {
        case 1:
          this.setState({
            color: 'green'
          });
          break;
        case 2:
          this.setState({
            color: 'red'
          });
          break;
        case 3:
          this.setState({
            color: 'yellow'
          });
          break;
        case 4:
          this.setState({
            color: 'blue'
          });
          break;
      }
    }, 1000 * i);
  }(i))
}
};

我收到以下错误

未捕获的类型错误：this.setState 不是函数

我如何在 ES2015+ 中解决这个问题？

舒巴姆·哈特里

问题是这不是在 setTimeout 函数中引用正确的上下文，您可以按照以下方式进行

game = (event) => {
 var self = this;
 let compArr = this.state.compArr;
 for (let i = 0; i < compArr.length; i++) {
  (function(i) {
    setTimeout(function() {
      switch (compArr[i]) {
        case 1:
          self.setState({
            color: 'green'
          });
          break;
        case 2:
          self.setState({
            color: 'red'
          });
          break;
        case 3:
          self.setState({
            color: 'yellow'
          });
          break;
        case 4:
          self.setState({
            color: 'blue'
          });
          break;
      }
    }, 1000 * i);
  }(i))
}
};

代码笔

您可以使用数组来简化您的逻辑

game = (event) => {
 var self = this;
 let compArr = this.state.compArr;
 var color = ["green", "red", "yellow", "blue"];
 for (let i = 0; i < compArr.length; i++) {
  (function(i) {
    setTimeout(function() {
      self.setState({color: color[compArr[i] - 1]});
    }, 1000 * i);
  }(i))
}
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。