Necesito que se muestre en la pantalla después de agregar un banco a la base de datos. Ahora el problema es que después de agregar un banco a la base de datos, se muestran todos los bancos de la base de datos, e incluso los que ya se agregaron, se vuelven a dibujar. ¿Cómo puedo dibujar en la pantalla un banco que he añadido?
// add bank function sendBankData() { db.collection("banks").add({ bankName: bankName.value, interestRate: interestRate.value, maximumLoan: maximumLoan.value, minimumDownPayment: minimumDownPayment.value, loanTerm: loanTerm.value, }); successfulPopUp(); } // get bank function getBanks() { db.collection("banks").onSnapshot((snapshot) => { let banks = []; snapshot.docs.forEach((doc) => { banks.push({ id: doc.id, ...doc.data(), }); }); generateBanks(banks); }); } function generateBanks(banks) { banks.forEach((bank) => { bankItems.innerHTML += `<div class="bank-item"> <img src="./img/edit-icon1.png" alt=""> <div class="bank-text"> Bank name: <span class="bank-name">` + bank.bankName + `</span> </div> <div class="bank-text"> Interest rate: <span class="bank-interest-rate">` + bank.interestRate + `</span> </div> <div class="bank-text"> Maximum loan: <span class="bank-maximum-loan">` + bank.loanTerm + `</span> </div> <div class="bank-text"> Minimum down payment: <span class="bank-minimum-down-payment">` + bank.maximumLoan + `</span> </div> <div class="bank-text"> Loan term: <span class="bank-loan-term">` + bank.minimumDownPayment + `</span> </div> </div> `; }); }Puede escuchar los cambios en los documentos y luego volver a procesar sus bancos:
function getBanks() { db.collection("banks").onSnapshot((snapshot) => { const banks = []; if (banks.length === 0) { // Your first loop for existing banks snapshot.docs.forEach((doc) => { banks.push({ id: doc.id, ...doc.data(), }); }); generateBanks(banks); } // Now you can listen for changes snapshot.docChanges().forEach((change) => { const bank = { id: change.doc.id, ...change.doc.data(), }; // Here you can add your new bank and rerender if (change.type === "added") { console.log("Added bank: ", bank); banks.push(bank ); generateBanks([bank ]); } // You can also react on modified and removed objects if (change.type === "modified") { console.log("Modified bank: ", bank ); } if (change.type === "removed") { console.log("Removed bank: ", bank ); } }); }); }Para obtener más información, consulte los documentos .