清空数组的函数在 then() 中不起作用答案

【问题标题】：function to empty array doesn't work inside then()清空数组的函数在 then() 中不起作用
【发布时间】：2021-11-03 23:47:41
【问题描述】：

以下是我从表单中添加数据的代码，当它会捕获 this.error 的值时，该变量没有给出任何值。我的代码行有问题吗？

saveContact: async function() {
  this.errors = [];
  if (this.name && this.phone) {
    this.loading = !this.loading;
    await addDoc(collection(db, "users"), {
      id: this.id,
      name: this.name,
      phone: this.phone
    }).then(() => {
      this.name = ""
      this.phone = ""
      // This empty errors not working
      this.errors = [];
    }).catch((error) => {
      this.error = error
    });
  }
  if (!this.name) this.errors.push("name");
  if (!this.phone) this.errors.push("phone");
}

this.error先用来容纳会发生的错误，然后如果firebase中的addDoc()函数成功了，then(),this.error = []变量被清空，这样错误就消失了，但是确实不工作。

【问题讨论】：

你能解释一下预期的行为和正在发生的事情吗？
“不工作” - 你怎么知道？你在函数顶部设置了this.errors = []，并在.then 中做同样的事情……你怎么知道它“不工作”？
我想清空 'name' 值，但是当我设置 this.name = "" 时，this.errors 会给出错误符号。所以我想要this.error的空数组。但不工作，而 this.name 工作
@bravo this.errors = [] 用于清除每个运行的函数的所有错误。在我设置 this.name = '' 之后，然后在 then() 内部是干净的错误，但它不起作用。
它正在工作，但是你在函数的底部添加它！因为当代码运行时 this.name 和 this.phone 现在将为空

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

您可以尝试将“this”存储为某个变量

【讨论】：

为什么前两个 this.xxx 可以工作，而不是那个？答案没有意义

【解决方案2】：

由于您等待承诺，并且在 .then 中清除 this.name 和 this.phone - 等待承诺之后的代码将看到 this.name 和 this.phone 为空

在你的代码中添加了 cmets 来解释

saveContact: async function() {
  this.errors = []; // you clear the errors
  if (this.name && this.phone) {
    this.loading = !this.loading;
    await addDoc(collection(db, "users"), {
      id: this.id,
      name: this.name,
      phone: this.phone
    }).then(() => {
      this.name = ""; // you empty the name
      this.phone = ""; // you empty the phone
      // This empty errors not working
      this.errors = []; // you clear the errors for no reason
    }).catch((error) => {
      this.error = error
    });
  }
  // here, name and phone will be empty, because you cleared them in the .then
  if (!this.name) this.errors.push("name");
  if (!this.phone) this.errors.push("phone");
}

一个修复 - else 中的最后一个代码块

saveContact: async function () {
    this.errors = [];
    if (this.name && this.phone) {
        this.loading = !this.loading;
        await addDoc(collection(db, "users"), {
            id: this.id,
            name: this.name,
            phone: this.phone
        }).then(() => {
            this.name = "";
            this.phone = "";
        }).catch((error) => {
            this.error = error
        });
    } else {
        if (!this.name)
            this.errors.push("name");
        if (!this.phone)
            this.errors.push("phone");
    }
}

更好的修复，以及使用 async/await 的更好方法

saveContact: async function () {
    this.errors = []; // you clear the errors
    if (this.name && this.phone) {
        this.loading = !this.loading;
        try {
            await addDoc(collection(db, "users"), {
                id: this.id,
                name: this.name,
                phone: this.phone
            });
            this.name = "";
            this.phone = "";
        } catch {
            this.error = error;
        }
    } else {
        if (!this.name)
            this.errors.push("name");
        if (!this.phone)
            this.errors.push("phone");
    }
}

【讨论】：

@Kamal - 好吧，这就是为什么我发布了应该可以工作的代码 - 事实上，有两段代码 - 第二段显示了你应该如何应该使用 async/await跨度>