Javascript 如何防止在html中显示重复行?

Javascript 如何防止在html中显示重复行?,javascript,html,ethereum,decentralized-applications,ganache,Javascript,Html,Ethereum,Decentralized Applications,Ganache,我遵循并完成了本教程。然而,当我在图中添加新投票时,重复的行显示在末尾 我不熟悉DAPP、web开发或javascript,所以我不知道我的错误在哪里 代码来自 我不知道添加新行是从哪里来的,我正试图阻止它。问题在于JavaScript的异步特性,应用程序在删除旧行之前没有等待区块链的响应,因此发生的是数据被插入dom两次,修复方法是以不同的方式处理承诺。将所有promise调用分组以将候选对象添加到一个数组中,然后等待所有候选对象都被解析后将其添加到dom中 App.contracts.El

我遵循并完成了本教程。然而,当我在图中添加新投票时,重复的行显示在末尾

我不熟悉DAPP、web开发或javascript,所以我不知道我的错误在哪里

代码来自


我不知道添加新行是从哪里来的,我正试图阻止它。

问题在于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);
  })

首先显示您的代码。我遵循上面的github链接。在github里