從箭頭函數內部訪問方法變量

Question

在我的 vuetify/vue.js 應用程序中，我試圖讀取我存儲的 firestore 集合，以計算存儲在那里的所有評級的平均評級：

function updateRating() {
  let firestoreQuery = firebase
      .firestore()
      .collection('ratings')
      .where('qrCodeId', '==', this.qrCode.id);

  let ratingsSum = 0;
  let ratingsAmountCounter = 0;

  firestoreQuery.get().then(querySnapshot => {
    querySnapshot.forEach(doc => {
      ratingsSum += doc.rating;
      ratingsAmountCounter++;
    });
  });
}

但是，我無法從forEach箭頭函數內部訪問ratingsSum和ratingsAmountCounter變量。 我已經嘗試過使用this或var _this = this解決方法，但兩者似乎都不起作用，eslint 仍然報告：

'ratingsSum' is assigned a value but never used (no-unused-vars)

我究竟做錯了什么？

Answer 1

正如評論所暗示的那樣，這里的問題是您沒有實際讀取ratingsSum和ratingsAmountCounter代碼。 錯誤消息告訴您 ESLint 已觸發名為“ no-unused-vars ”的規則來告訴您這一點。 永遠不會被讀取的變量可能是一個錯誤，或者至少是不必要的代碼。

您可能應該做的是向調用者返回一個承諾，以便他們可以在異步get()完成並計算值時get()這些值。 例如：

function updateRating() {
  let firestoreQuery = firebase
      .firestore()
      .collection('ratings')
      .where('qrCodeId', '==', this.qrCode.id);

  let ratingsSum = 0;
  let ratingsAmountCounter = 0;

  return firestoreQuery.get().then(querySnapshot => {
    querySnapshot.forEach(doc => {
      ratingsSum += doc.rating;
      ratingsAmountCounter++;
    });
    return { ratingsSum, ratingsAmountCounter }
  });
}

這個函數的調用者現在收到一個承諾，當值已知時解析，並且可以從解析的對象中獲取它們：

updateRating().then(result => {
  const { ratingsSum, ratingsAmountCounter } = result;
  // Now you can use ratingsSum and ratingsAmountCounter...
})

Answer 2

這可能有效，我無法測試它，因為我不知道如何使用 vue 但這里是

   async function getData(){
      return await firebase
          .firestore()
          .collection('ratings')
          .where('qrCodeId', '==', this.qrCode.id)
          .get()
        }
    })

然后你可以這樣做：

getData().then(_querySnapshot => {
        var ratingsSum = 0
        var ratingsAmountCounter = 0
      _querySnapshot.forEach(doc => {
        ratingsSum += doc.rating;
        ratingsAmountCounter++;
      });
});