Question

我有一个问题，那就是导致无限循环。这是我的项目的简短过程。我有一个datatable，我使用了Firebase OnSnapShot函数对表进行了分页。该表的“操作”列将在单击时显示一个模式。当我更新来自表的值时，vuelidate isUnique函数将引发无限循环。

P.S我在查看模态之前先将监听器分离

无限循环的输出：

这是我加载datatable的功能：

 async loadData(firebasePagination) {
      // query reference for the messages we want
      let ref = firebasePagination.db;

      // single query to get startAt snapshot
      ref.orderBy(firebasePagination.orderColumn, 'asc')
        .limit(this.pagination.rowsPerPage).get()
        .then((snapshots) => {
          // save startAt snapshot
          firebasePagination.start = snapshots.docs[snapshots.docs.length - 1]

          // create listener using endAt snapshot (starting boundary)
          let listener = ref.orderBy(firebasePagination.orderColumn)
            .endAt(firebasePagination.start)
            .onSnapshot((datas) => {
              if(!datas.empty){
                datas.docs.forEach((data, index) => {
                  //remove duplicates
                  console.log("here")
                  firebasePagination.data = firebasePagination.data.filter(x => x.id !== data.id)
                  //push to the data
                  firebasePagination.data.push(Object.assign({id : data.id },data.data()))

                  if(datas.docs.length-1 === index){
                    //sort
                    firebasePagination.data.sort((a, b) => (a[firebasePagination.orderColumn] > b[firebasePagination.orderColumn]) ? 1 : -1)
                    //get the current data
                    firebasePagination.currentData = this.getCurrentData(firebasePagination)
                  }
                })
              }
            })
          // push listener
          firebasePagination.listeners.push(listener)
        })
      return firebasePagination;
    }

这是我单击操作（模式）时的功能：

   switch(items.action) {
      case 'edit':
        //detaching listener
        this.firebasePagination.listeners.forEach(d => {
          d()
        });
        items.data.isEdit = true;
        this.clickEdit(items.data);
        break;
    }
  }

这是我的isUnique函数：

validations: {
      department: {
        name: {
          required,
          async isUnique(value){
            if(value.trim() === ''){
              return false;
            }
            if(strictCompareStrings(this.departmentName, value)){
              this.departmentError.isActive = true;
              this.departmentError.isValid = true;
              return true;
            }
            const result = await checkIfUnique(DB_DEPARTMENTS, {nameToLower : this.department.name.toLowerCase()});
            console.log("GOES HERE")

            if(!result.isValid){
              result.errorMessage = result.isActive ?
                'Department already exists.' : 'Department has been archived.';
            }
            this.departmentError = Object.assign({}, result);
            return this.departmentError.isValid;
          }
        }
      }
    }

这是我的checkUnique函数：

export const checkIfUnique = (db, nameObj, isTrim = true) => {
  return new Promise(resolve => {
    const nameObjKey = Object.keys(nameObj)[0];
    const name = isTrim ? nameObj[nameObjKey].replace(/\s+/g,' ').trim().toLowerCase() : nameObj[nameObjKey].trim();
    db().where(nameObjKey, '==', name).get()
      .then((doc) => {
        let result = {isActive: false, isValid: true, errorMessage: ''};
        if(!doc.empty){
          result.isActive = doc.docs[0].data().isActive;
          result.isValid = false;
        }
        resolve(result);
      })
  });
};

Answer 1

研究了另一个使用here中的isUnique的示例，并认为您可能必须从Promise本身返回isUnique本身。

  isUnique(value) {
    if (value === '') return true
    return new Promise((resolve, reject) => {
      yourQueryMethod(`....`)
        .then(result => resolve(result))
        .catch(e => reject(false));
    })
  }

但是话又说回来，关于Infinite loop when using a promise-based validate #350，我们仍然有一个未解决的问题。

Vuelidate isUnique导致无限循环

1 个答案: