Блог

Я получил обработчик щелчка, который при нажатии по какой-то причине обновляет мое значение дважды (увеличивая или уменьшая дважды).Это происходит не все время, но я бы сказал, в 90% случаев. Я хочу предотвратить это и обновлять значение только один раз.

Позвольте мне объяснить.

Во-первых, вот мой код шаблона кнопки:

           <b-button
            variant="link"
            class="mb-2"
            @click="clueHandler(comment)"
          >
  

Вот код скрипта для clueHandler :

 async clueHandler(comment) {
  const inClues =
    this.clues.findIndex((clue) => clue.id === comment.id) > -1
  if (this.loggedIn) {
    if (inClues) {
      await this.$store.dispatch('removeCommentFromCluesFeed', comment)
      console.log('dispatched from clueHandler')
    } else if (!inClues) {
      await this.$store.dispatch('addCommentToCluesFeed', comment)
      console.log('dispatched from clueHandler')
    }
  } else {
    this.$router.replace('/login')
  }
},
  

Вот логика в Vuex для обновления свойства документа Firestore:

   async addCommentToCluesFeed({ state }, comment) {
    try {
      const cluesFeedDoc = this.$fireStore
        .collection(`users/${state.userProfile.uid}/clues`)
        .doc(comment.id)
      await cluesFeedDoc.set(comment)
      console.log('clue added from addCommentToCluesFeed action')
      await this.$fireStore
        .collection('comments')
        .doc(comment.id)
        .update({
          clueVotes: parseInt(comment.clueVotes)   1 // <<<<------------HERE !!
        })
      console.log('clue vote increased from addCommentToCluesFeed action')
    } catch (error) {
      console.error(
        'error adding clue from addCommentToCluesFeed action',
        error
      )
    }
  },
  

Вот скриншот области, которую обновляет обработчик:

Происходит то, что когда вы нажимаете ОДИН раз на кнопку шаблона с помощью clueHandler, свойство document clueVotes увеличивается в два раза (или уменьшается в два раза в зависимости от того, была ли подсказка уже установлена пользователем ранее).

Вот пример того, что показывает база данных, когда пользователь нажимает кнопку в первый раз:

Это должно быть только clueVotes: 1 .

У кого-нибудь есть какие-либо советы или мысли о том, что происходит или как я могу исправить? Я предполагаю, что это будет связано с неполным выполнением обещания / завершением гонки и т.д. Спасибо!

Я нашел отличное объяснение, почему у меня возникла эта проблема. Вот оно: https://fireship.io/snippets/firestore-increment-tips /

По сути, мне нужно было вернуть специальное значение, которое можно использовать с помощью set() или update(), которое сообщает серверу увеличить текущее значение поля на заданное значение.

Вот мое обновление кода:

             .update({
              clueVotes: this.$fireStoreObj.FieldValue.increment(1)
            })