在函数（）中使用 setState 时无法读取未定义的属性“setState”[重复]答案

【问题标题】：Cannot read property 'setState' of undefined when using setState inside function() [duplicate]在函数（）中使用 setState 时无法读取未定义的属性“setState”[重复]
【发布时间】：2020-03-05 02:04:44
【问题描述】：

我需要将箭头函数转换为函数。这是由于 Slick Slider 的问题，因为它 does not support properly arrow functions。

我已经转换了这个：

beforeChange={(current, next) => this.setState({slideIndex: next})}

进入这个：

beforeChange={function(current, next) {
  this.setState({slideIndex: next});
}}

但不起作用。已经尝试过这个解决方案：

beforeChange={function(current, next) {
    this.setState(function() {
        return {slideIndex: next};
    });
}}

【问题讨论】：

因为this 范围是错误的。使用箭头函数时 (=>) this 仍然存在，但使用 function(){} 时，this 有自己的作用域，因此 this.setState() 将不起作用，除非您将函数与 ...}.bind(this) 绑定
“这是由于 Slick Slider 的问题...” - 不，问题在于 IE 及其缺少的支持，而不是 Slick Slider。

标签： javascript reactjs

【解决方案1】：

使用bind 将上下文传递给函数：

beforeChange={function(current, next) {
  this.setState({slideIndex: next});
}.bind(this)}

这会将this 传递给函数，以便在函数内部引用this 时将是通过bind 传递的那个。

箭头函数会自动执行此操作，它们会将被调用位置的上下文传递给函数本身，因此通过删除箭头函数，您会删除正确的上下文。

允许您手动传递上下文的其他函数有：apply、call 和前面提到的bind。

【讨论】：