显示来自 Firestore 的递增值

Question

我正在尝试制作几个按钮，就像投票系统一样。用户可以按下 5 个不同的按钮，每个按钮的投票数存储在 Firestore 中。按下按钮后，该值应该显示在每个按钮上，这就是我的问题所在。我编写了一个代码来增加值并显示投票数，但它不适用于用户按下的按钮。例如，如果我按下按钮 1，所有其他按钮都会显示正确的票数，但在按下的按钮上，即使有几票，也只会显示一票。这也发生在所有其他按钮上，并且问题仅发生在按下的按钮上。如果它太长，我很抱歉，但我相对于 javascript。这是我的代码：

            <ul>
              <li class="circleProgressVote"> 
                <button class="btn white black-text voteBtn" id="btn1"  onclick="vote1(); disableButton();"> Svært dårlig </button>
              </li>
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn2"  onclick="vote2(); disableButton();"> Dårlig </button>
              </li>
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn3"  onclick="vote3(); disableButton();"> Usikker </button>
              </li>
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn4"  onclick="vote4(); disableButton();"> Bra </button>
              </li> 
              <li class="circleProgressVote">
                <button class="btn white black-text voteBtn" id="btn5"  onclick="vote5(); disableButton();"> Svært bra </button>
              </li>
            </ul>



function vote1() {
  console.log('ans1');


  const valg1 = db.collection('spørsmål').doc('BdTGAbGw33HSr9GZoJYA');
  valg1.update({ 'valg1': increment });


  db.collection('spørsmål').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
      hentSvar1(doc);
    });
  });

  function hentSvar1(doc) {


    let div1 = document.createElement('div');
    let votes1 = document.createElement('span');
    let span1 = document.createElement('span');

    div1.setAttribute('data-id', doc.id);
    votes1.textContent = doc.data().valg1;
    span1.textContent = ' stemmer';

    div1.appendChild(votes1);
    div1.appendChild(span1);

    let div2 = document.createElement('div');
    let votes2 = document.createElement('span');
    let span2 = document.createElement('span');

    div2.setAttribute('data-id', doc.id);
    votes2.textContent = doc.data().valg2;
    span2.textContent = ' stemmer';

    div2.appendChild(votes2);
    div2.appendChild(span2);

    let div3 = document.createElement('div');
    let votes3 = document.createElement('span');
    let span3 = document.createElement('span');

    div3.setAttribute('data-id', doc.id);
    votes3.textContent = doc.data().valg3;
    span3.textContent = ' stemmer';

    div3.appendChild(votes3);
    div3.appendChild(span3);

    let div4 = document.createElement('div');
    let votes4 = document.createElement('span');
    let span4 = document.createElement('span');

    div4.setAttribute('data-id', doc.id);
    votes4.textContent = doc.data().valg4;
    span4.textContent = ' stemmer';

    div4.appendChild(votes4);
    div4.appendChild(span4);

    let div5 = document.createElement('div');
    let votes5 = document.createElement('span');
    let span5 = document.createElement('span');

    div5.setAttribute('data-id', doc.id);
    votes5.textContent = doc.data().valg5;
    span5.textContent = 'stemmer';

    div5.appendChild(votes5);
    div5.appendChild(span5);



    svar1.appendChild(div1);
    svar2.appendChild(div2);
    svar3.appendChild(div3);
    svar4.appendChild(div4);
    svar5.appendChild(div5);


    document.getElementById('btn1').style.border = '2px solid red';

  };
};

所有的vote1()-vote5()函数都是一样的，最后一行没有改变所选按钮的边框，顶部的递增函数递增firestore中的五个不同字段，里面的函数称为“hentSvar1” , "hentSvar2" 等等。 我尝试在增量代码之后使用 then() 并将其放在其余代码中以查看是否有帮助，但这不起作用。我也知道显示值的函数太长且效率低下，但我对 javascript 还是比较陌生。如果有人需要，这是 Firestore 中的数据库： valg1 - valg5 是连接到每个按钮的那些字段，是一个更新和显示的字段。 如果这太长了，我很抱歉，但我不知道是什么问题。如果你们中的任何人可以帮助我，我将不胜感激。 谢谢。

Answer 1

update 的文档指出此方法是异步的并返回一个承诺，但您无需等待承诺完成即可阅读文档。这可以解释为什么这些值没有按预期更新。我建议添加 then() 和 catch() 回调，如 Firestore documentation 中的这个 sn-p 所示：

var washingtonRef = db.collection("cities").doc("DC");

// Set the "capital" field of the city 'DC'
return washingtonRef.update({
    capital: true
})
.then(function() {
    console.log("Document successfully updated!");
})
.catch(function(error) {
    // The document probably doesn't exist.
    console.error("Error updating document: ", error);
});

另外，有两件事可能与手头的问题无关，但可能会有所帮助。

• 您正在检索整个“spørsmål”集合，即使您只需要其中的一个文档。鉴于您知道正在使用的文档 ID BdTGAbGw33HSr9GZoJYA，最好使用 db.collection('spørsmål').doc('BdTGAbGw33HSr9GZoJYA').get() 检索该文档。检查this。
• 这是我第一次看到语法{ fieldname : increment } 而不是{ fieldname: FieldValue.Increment(number)}，这是我在Web API reference 中找到的语法。也可能是语法正确，因为公平地说，我更习惯 Node.js 和 Python 客户端库。

最后，您可以考虑实现real-time listeners，以便在文档更改时收到通知，从而无需自己查询即可发送新数据。尽管对于手头的示例来说这可能有点矫枉过正，但以更被动的方式简化一些接近 UI 更新的设计可能会很有用。