Question

我试图使几个按钮几乎像投票系统一样。用户可以按5个不同的按钮，每个按钮的投票数存储在Firestore中。按下on按钮后，该值应该显示在每个按钮上，这就是我的问题所在。我编写了一个代码，可以增加值并显示投票数，但是对用户按下的按钮不起作用。例如，如果我按下按钮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';

  };
};

所有功能表决1（）-表决5（）相同，而最后一行没有更改所选按钮的边框，顶部的递增函数可递增Firestore中的五个不同字段，而内部函数称为“ hentSvar1” ，“ hentSvar2”等。我尝试在增量代码之后使用then（），然后将其放置在其余代码中，以查看是否有帮助，但这没有用。我也知道显示值的函数太长且效率低下，但是我对javascript还是比较陌生。如果有人需要，这是Firestore中的数据库： valg1-valg5是连接到每个按钮的字段，是按钮的更新内容并显示出来。很抱歉，如果时间太长，但是我无法找出问题所在。如果有谁可以帮助我，我将不胜感激。谢谢。

Answer 1

update的文档指出此方法是异步的，并返回一个Promise，但是您在阅读文档之前不必等待Promise的完成。这可以解释为什么值未按预期更新。我建议从Firestore documentation的此代码段中添加then（）和catch（）回调：

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”收藏集，即使您只需要一个文档。假设您知道正在使用BdTGAbGw33HSr9GZoJYA的文档ID，最好仅使用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更新的设计可能会很有用。

显示来自Firestore的增量值

1 个答案: