Cloud Firestore DB覆盖先前更新的数据的问题

Question

我有一个云存储数据库，该数据库使用onSnapshot在表中显示数据。单击TD元素之一时，我正在使用引导程序来触发模态。然后，这应该允许我使用模式来编辑该数据。

我可以正确触发模式并将数据从DB提取到模式中。我也可以使用这种模式来更新数据库中的数据。

单击“保存”时，它会在数据库中编辑代码并更改正确的文档字段。

但是，当重新运行模式并编辑新成绩时，它将在该页面加载期间更新该成绩以及所有以前更新的成绩。

当我使用db.collection("students").get().then(function(querySnapshot) {

代替

db.collection("students").onSnapshot(function(querySnapshot) {

它可以工作，但是需要刷新页面。我想知道如何继续使用onSnapshot并仅更新正确的文档，以便不需要刷新页面

JS代码

const db = firebase.firestore();

db.collection("students").onSnapshot(function(querySnapshot) {
        //setup html as a blank variable
        let html = $("<div></div>");

        querySnapshot.forEach(function(doc) {

            let student = doc.data();

            html = html.add($('<tr> \
                                <th scope="row">'+doc.id+'</th> \
                                 <td>'+student.first_name+'</td> \
                                 <td>'+student.last_name+'</td> \
                                 \
                                 <td data-toggle="modal" data-target="#unitModal" data-unit="IT1" data-student="'+student.first_name+' '+student.last_name+'" data-CG="'+student.UnitGrades.IT1.CG+'" data-student-id="'+doc.id+'">'+student.UnitGrades.IT1.CG+'</td> \
                            </tr>'));

            $('#overallDashboard > tbody:last-child').html(html);//close html
    }); //end for each loop

});//end onSnapshot 



//Code to identify current grade CG set from the clicked td element

$(document.body).on("click", "td", function() {

let studentId = $(this).attr("data-student-id");
                    let unitNo = $(this).attr("data-unit");
                    let CG = $(this).attr("data-CG");
                    let studentName = $(this).attr("data-student");

//display clicked student as heading of modal

$("#unitResultModalHeading").text(unitNo+": "+studentId+" - "+studentName);

//when clicking the save changes button in the modal
$("#saveUnitGrades").click(function () {

let currentGrade = "";

                                   if($('#currentOption1').is(':checked')) 
                                    { 
                                        currentGrade = "F"; 

                                    } else if($('#currentOption2').is(':checked')) 

                                    { 
                                        currentGrade = "R"; 

                                    } else if($('#currentOption3').is(':checked')) 
                                    { 
                                        currentGrade = "P"; 

                                   } else if($('#currentOption4').is(':checked')) 
                                    { 
                                        currentGrade = "M"; 

                                   } else if($('#currentOption5').is(':checked')) 
                                    { 

                                        currentGrade = "D";
                                   }


var gradeDocRef = db.collection("students").doc(studentId);

var setWithMerge = gradeDocRef.set({
   "UnitGrades": {
    [unitNo]: {
    "CG" : currentGrade
}
                                                                            }
}, { merge: true });

//clear the gradeDocRef object when finished with it                                    
    for (let member in gradeDocRef) delete gradeDocRef[member];

});//end save unit grades click 


}//end td click

引导程序模式

<div class="modal fade" id="unitModal" tabindex="-1" role="dialog" aria-labelledby="examModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="unitResultModalHeading"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- Modal Body --> 
      <div class="modal-body">

       <!-- CWK current grade Options -->
      <h6>Current Grade</h6>
      <div id="currentGrade" class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption1" autocomplete="off"> Fail</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption2" autocomplete="off"> Nearly Pass</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption3" autocomplete="off"> Pass</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption4" autocomplete="off"> Merit</label>
        <label class="btn btn-secondary"><input type="radio" name="currentOptions" id="currentOption5" autocomplete="off"> Distinction</label>
      </div>
<div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="saveUnitGrades" type="button" data-dismiss="modal" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>