即使使用 if/else 语句 JS，Firebase 也会进行多次调用

Question

我正在使用 Vue 和 Firebase 构建应用程序。我是 Firebase 的新手，我遇到了一些问题。我尝试将姓名+电子邮件存储在数据库中。我想要的是首先检查电子邮件是否已经在数据库中，如果没有，则运行另一个将存储名称+电子邮件的函数。如果电子邮件存储在数据库中，我想输出警报并取消提交。

所以数据库中电子邮件的检查进展顺利，它会输出警报，并且我能够检索数据。但是问题出在哪里，当我输入不在数据库中的电子邮件时。当我输入新的电子邮件（和姓名）时，它会检查数据库并返回 false，但随后会立即进行另一个调用（我不知道为什么，这就是我猜的问题）并且它会返回 true，并且已经存在的警报， 同时。然后它将继续执行另一个函数来存储数据，因为这是第一次调用的输出（这是错误的）。

我的 JS 代码：

checkForm() {

        let app = this;

        if (this.name == '' || this.emailadress == '') {
            alert('You have to fill out the form');
        } else {

            app.getFirebase();

        }
},

getFirebase() {

        let app = this;

        var ref = firebase.database().ref().child('/aanmeldingen/');
        ref.on('value', function(snapshot) {

            const array = [];

            snapshot.forEach(function(childSnapshot) {
              var checkEmail = childSnapshot.val().email;
              array.push(checkEmail);
            });

            const res = array.includes(app.emailadress);
            console.log(array);
            console.log(res);

              if(res) {
                alert('You already have entered the giveaway');
              } else if (res == false) {

                app.store();

              }
        });
},

store() {
                this.step_two = false;
                this.active_two = false;

                this.active_three = true;
                this.step_three = true;

                let app = this;

                firebase.database().ref('/aanmeldingen/').push({
                username: app.name,
                email: app.emailadress,
                });
}

控制台截图（输入简，不在数据库中）

Answer 1

您应该使用once() 而不是on()。 on() 使监听器保持连接状态，因此当您将数据推送到 store() 时，监听器会再次触发。