javascript - 从箭头函数内部访问方法变量

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”的规则来告诉您这件事。从未读取的变量可能是错误，或者至少是不必要的代码。

您可能应该做的是向调用者返回一个 promise ，以便他们可以在异步 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 }
  });
}

这个函数的调用者现在收到一个在值已知时解析的 promise ，并且可以从已解析的对象中提取它们:

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