首先来看一段代码,我将 h1 绑定了一个点击事件,调用this.changeWeather 方法,打印this.state.isHot的值
当我点击h1的时候,控制台出现了以下错误
state undefined 于是我又打印了this 结果也是 undefined 为什么会出现这种情况呢?
我们先来看一段代码
我们首先新建一个Person类, 并在类的study()方法中打印
this
1》实例化Person类 并通过p1调用study()
2》将const x = p1.study 并调用 x()![]()
我们可以看到
通过p1调用study方法时this指向Person实例
但调用x()时却得到的的是 undefined
你可以这样理解
function(){} 这个方法本来只有
xxx.study()可以调用,并且只有通过类的实例对象调用时,function(){} 里的this才指向 Person
但是 当 x 也指向这个 function(){} 时,调用x() 属于直接调用,此时 function(){} 里面的this会指向Windows,在严格模式下显示为 undefined`
同理
你将 onclick={this.changeWeather},当你点击后 onclick 找到了 changeWeather()方法,此时属于直接调用,所以里面的 this 指向的不是 Weacher 而是Windows,又因为类里面的方法会开启局部严格模式,所以会出现state undefined
解决办法
通常就是让 onclick 接收的changeWeather()方法 内部this指向 Weather
1 通过箭头函数将function(){} 里的this绑定到类
2 在类的constructor内 this.changeWeather = this.changeWeather().bind(this); this指向Weather的changeWeather() 方法
这样就可以了