javascript - 在 function() 内使用 setState 时无法读取未定义的属性 'setState'

Question

这个问题已经有答案了:

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (4 个回答)

React - uncaught TypeError: Cannot read property 'setState' of undefined (21 个回答)

已关闭 3 年前。

我需要将箭头函数转换为函数。这是由于 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};
    });
}}

Answer 1

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

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

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

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

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