如何防止重复的行显示在html中？

Question

我已遵循并完成了本教程https://github.com/dappuniversity/election/tree/2019_update。但是，当我向其中添加新的投票时，重复的行会显示在末尾（如图所示）。

我不熟悉dApp，Web开发或javascript，所以我不知道我的错误在哪里。

来自https://github.com/dappuniversity/election/tree/2019_update的代码。

我不知道添加新行的位置，我正试图阻止它。

Answer 1

问题在于JavaScript的异步特性，应用程序在删除旧版本之前未等待区块链的响应，因此发生的情况是两次将数据插入dom，解决方法是以不同方式处理承诺。将所有promise调用分组，以将候选者放入数组，然后等待所有解决方法都解决后将其添加到dom。

 App.contracts.Election.deployed()
  .then(function(instance) {
    electionInstance = instance;
    return electionInstance.candidatesCount();
  })
  .then(function(candidatesCount) {
    const promises = [];
    // Store all prosed to get candidate info
    for (var i = 1; i <= candidatesCount; i++) {
      promises.push(electionInstance.candidates(i));
    }

    // Once all candidates are received, add to dom
    Promise.all(promises).then(candidates => {
      var candidatesResults = $("#candidatesResults");
      candidatesResults.empty();

      var candidatesSelect = $("#candidatesSelect");
      candidatesSelect.empty();

      candidates.forEach(candidate => {
        var id = candidate[0];
        var name = candidate[1];
        var voteCount = candidate[2];

        // Render candidate Result
        var candidateTemplate =
          "<tr><th>" +
          id +
          "</th><td>" +
          name +
          "</td><td>" +
          voteCount +
          "</td></tr>";
        candidatesResults.append(candidateTemplate);

        // Render candidate ballot option
        var candidateOption =
          "<option value='" + id + "' >" + name + "</ option>";
        candidatesSelect.append(candidateOption);
      });
    });

    return electionInstance.voters(App.account);
  })