【发布时间】：2020-06-20 17:37:42
【问题描述】：
我的理财应用有问题。当我从我的应用程序（产品集合）中添加/删除数据时，我的应用程序执行“sumPrices()”多个函数。例如：当我添加一个产品时，制作一次，添加另一个产品，制作两次，添加另一个产品制作三个等。这与删除数据的方式相同。
在我的代码中做错了什么？
Callback.push 推送数据做数组，我从 firebase 取消订阅事件。 AddStatsUI 将 UI 添加到我的 DOM。
index.js：
// delete products
const handleTableClick = e => {
console.log(e); // mouseevent
if (e.target.tagName === 'BUTTON'){
const id = e.target.parentElement.parentElement.getAttribute('data-id');
db.collection('users')
.doc(user.uid)
.collection('products')
.doc(id)
.delete()
.then(() => {
// show message
updateMssg.innerText = `Product was deleted`;
updateMssg.classList.add('act');
setTimeout(() => {
updateMssg.innerText = '';
updateMssg.classList.remove('act');
}, 3000);
productUI.delete(id);
products.sumPrices(user.uid, callbacks).then(value => {
sumStats.addStatsUI('','');
const unsubscribe = db.collection('users').doc(user.uid).get().then(snapshot => {
sumStats.addStatsUI(value[0], snapshot.data().budget);
})
callbacks.push(unsubscribe);
});
})
}
}
table.addEventListener('click', handleTableClick);
callbacks.push(() => table.removeEventListener('click', handleTableClick))
//add new products to firebase
const handleExpenseFormSubmit = e => {
e.preventDefault();
const name = expenseForm.productName.value.trim();
const price = Number(expenseForm.price.value.trim());
console.log(`Product added: ${name}, ${price}`);
const user = firebase.auth().currentUser.uid;
products.addProduct(name, price, user)
.then(() => {
products.sumPrices(user, callbacks).then(value => {
sumStats.addStatsUI('','');
const unsubscribe = db.collection('users').doc(user).onSnapshot(snapshot => {
sumStats.addStatsUI(value, snapshot.data().budget);
})
callbacks.push(unsubscribe);
});
expenseForm.reset()
})
.catch(err => console.log(err));
}
expenseForm.addEventListener('submit', handleExpenseFormSubmit);
callbacks.push(() => expenseForm.removeEventListener('submit', handleExpenseFormSubmit))
product.js：
class Product {
constructor(name, price, budget, user) {
this.products = db.collection('users');
this.budget = budget;
this.name = name;
this.price = price;
this.user = user;
}
async addProduct(name, price, user) { //dodaje produkt do firebase
const now = new Date();
const product = {
name: name,
price: price,
created_at: firebase.firestore.Timestamp.fromDate(now),
};
const response = await this.products.doc(user).collection('products').add(product);
return response;
}
getProducts(callback, user){ //download list from firebase
this.products.doc(user).collection('products')
.orderBy("created_at", "desc")
.onSnapshot(snapshot => {
snapshot.docChanges().forEach(change => {
if(change.type === 'added'){
//udpate UI
return callback(change.doc.data(), change.doc.id);
}
});
});
}
updateBudget(budget, user){
this.budget = budget;
db.collection('users').doc(user).update({budget: budget});
// callbacks.push(unsubscribe);
}
async sumPrices(user, callbacks){
let finish = [];
const unsubscribe = this.products.doc(user).collection('products').onSnapshot(snapshot => {
let totalCount = 0;
snapshot.forEach(doc => {
totalCount += doc.data().price;
});
const a = totalCount;
console.log(a);
finish.push(a);
return finish;
})
callbacks.push(unsubscribe);
return finish;
};
};
sumStatsUI.js：
class Stats {
constructor(stats, circle, budget){
this.stats = stats;
this.circle = circle;
this.budget = budget;
}
addStatsUI(data, budget){
if(data) {
const outcome = Math.round(data * 100) / 100;
const sumAll = Math.round((budget - outcome) * 100) / 100;
this.stats.innerHTML += `
<div><span class="budget-name">Budget: </span> <span class="stat-value">${budget}$</span></div>
<div><span class="budget-name">Outcome: </span> <span class="stat-value outcome-value">${outcome}$</span></div>
<div><span class="budget-name">All: </span> <span class="stat-value last-value">${sumAll}$</span></div>
`;
const circle = Math.round(((outcome * 100) / budget) * 100) / 100;
this.circle.innerHTML += `${circle}%`;
} else {
this.stats.innerHTML = '';
this.circle.innerHTML = '';
}};
};
导出默认统计信息；
【问题讨论】：
-
您好，欢迎您！我无法理解什么是确切的问题。从代码看来，每次添加产品 sumPrices 时都会被调用。另一方面，这似乎也是一个问题......它应该如何工作而不是......？
-
每次当我从费用表中添加或删除数据时（看截图），这会生成 sumPrices() 但应用程序会像这样执行代码 sumPrices() ：当我添加一个产品时，制作一次，添加另一个产品，制作两次，添加另一个产品制作三个等。这与删除数据的发生方式相同。当这种情况发生时，返回 sumPrices() 升序。第一次：返回结果一次，下一次返回两次等。如果这还不够，我可以制作视频，它是如何工作的。
-
您有一个未取消订阅的订阅，例如每次您拨打
getProducts时都会创建一个新订阅 -
我必须在哪里取消订阅才能修复它？在某处获取函数或 index.js 中的产品？ @Reza
-
@mGryska 两种方式：您可以调用一次 getProducts 并且该函数需要返回 observable，您订阅它，然后当您的组件销毁时您需要取消订阅，另一个选项使用
first()in您的管道将结束订阅，并且每次您都可以调用 getProducts
标签： javascript firebase google-cloud-firestore