在事件处理程序内无法直接从fetch()回调中引用React的'this'。这是因为在事件处理程序中,函数的上下文已经改变,无法访问到React组件的实例。为了解决这个问题,可以采取以下几种方法:
fetchData = () => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 在这里可以直接使用React组件的'this'
this.setState({ data: data });
});
}
fetchData() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(function(data) {
// 在这里可以通过bind()方法绑定React组件的'this'
this.setState({ data: data });
}.bind(this));
}
fetchData() {
const self = this;
fetch('https://api.example.com/data')
.then(response => response.json())
.then(function(data) {
// 在这里可以使用存储的React组件实例变量
self.setState({ data: data });
});
}
以上是解决在事件处理程序内无法从fetch()回调引用React 'this'的几种常见方法。根据具体的项目需求和开发环境,选择适合的方法即可。
领取专属 10元无门槛券
手把手带您无忧上云