无法从内部回调引用反应组件

Question

在我的反应组件中，我尝试在完成后emptyCart调用该函数。但是，当我从回调内部调用the emptyCart(在代码中表示为 SECOND CALL(时，出现错误：TypeError: Cannot read property 'emptyCart' of undefined。但是，当我从函数的开头调用emptyCart时，它会按预期工作。旁注，我在代码中从来没有两个emptyCart调用。为什么我不能从回调中使用this引用我的组件？

checkout = (order) => {
this.emptyCart(); //FIRST CALL
axios({
method: 'post',
url: '/api',
data: {
order:order,
},
})
.then(function(response) {
this.emptyCart(); //SECOND CALL
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}

Answer 1

this指的是回调函数。一个简单的解决方法是替换为箭头函数。

checkout = (order) => {
this.emptyCart(); //FIRST CALL
axios({
method: 'post',
url: '/api',
data: {
order:order,
},
})
.then((response) => {
this.emptyCart(); //SECOND CALL
console.log(response);
})
.catch(error) => {
console.log(error);
});

}