無法引用內部回調中的反應組件

Question

在我的反應組件中，我試圖在完成發佈請求後調用函數emptyCart。但是，當我從呼叫內部撥打the emptyCart（表示爲SECOND CALL代碼）時，出現錯誤：TypeError: Cannot read property 'emptyCart' of undefined。但是，如果從函數的開始處調用emptyCart，則按預期工作。 Sidenote，我從來沒有在代碼中同時撥打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); 
}); 

}