javascript - 使用 onClick 事件处理程序时不断调用自身

Question

我期望发生的事情: 当用户单击 addProject 按钮时，事件监听器将运行调用

formSubmit

我们将检查日期是否有效，如果有效，它将调用fetchingCompanyNameAndUserData

它将获取所需的数据更新状态，并调用 checkUniqueName ，后者将再次获取一些数据，确保不存在重复，然后它应该调用 this.insert() 最终会将数据插入到我们的 firestore-NoSQL-DB 中。 问题: 这些函数特别是 checkUniqueName 不断地一遍又一遍地调用它自己，我不知道那里出了什么问题。 代码:

formSubmit = event => {
  event.preventDefault();
  const isLoading = this.state;

  var sdate = this.state.projectData.sdate;
  var edate = this.state.projectData.edate;
  if (sdate > edate) {
    NotificationManager.error(`Please entre a valid dates`);
    return;
  } else {
    // isLoading = true;
    this.fetchingCompanyNameAndUserData();
  }  
};

fetchingCompanyNameAndUserData = async () => {
  const userRef = fireStore.collection('users');
  const userData = await userRef.where("Email", "==", auth.currentUser.email).get();
  userData.forEach(doc => {
    console.log('this one must match', doc.data().CompanyName)
    const cashedFirstName = doc.data().FirstName;
    const cashedLastName = doc.data().LastName;
    const fullName = cashedFirstName + ' ' + cashedLastName;
    return this.setState({
        companyName: doc.data().CompanyName,
        userName: fullName,
      }, () => {
        console.log('done fetching');
        this.checkUniqueName();
      });
  })
};

checkUniqueName = async () => {
  const projectName = this.state.projectData.title;
  const companyName = this.state.companyName;
  const projectRef = fireStore.collection('PROJECT')
  const projectData = await projectRef.where("ProjectName", "==", projectName).get();

  projectData.forEach(doc => {
    if (doc.data().CompanyName !== companyName) {
      console.log('checking unique nameing');
      this.insert();
    } else {
      NotificationManager.error('this project already exists');
    }

  })
}

async insert() {
  //async function foo() {
  console.log('insreting proooo');
  var ptitle = this.state.projectData.title;
  var pdesc = this.state.projectData.desc;
  var sdate = this.state.projectData.sdate;
  var edate = this.state.projectData.edate;
  var status = this.state.projectData.status;
  var companyName = this.state.companyName;


  try {

    let response = await fireStore.collection("PROJECT").add(
      {
        ProjectName: ptitle,
        CompanyName: companyName,
        ProjectDescription: pdesc,
        startDate: sdate,
        EndDate: edate,
        Status: status,
        CreatedBy: auth.currentUser.email,
        CreatedDate: toUTCDateString(new Date()),
        LastModifiedBy: auth.currentUser.email,
        LastModifiedDate: toUTCDateString(new Date()),
        UserDocId: auth.currentUser.uid
      });

    let doc = await fireStore.collection("PROJECT").doc(response.id).get()

    this.handleClose();

    //alert(doc.id)
    var d1 = doc.id;
    this.props.history.push('/app/dashboard/addproject/' + d1);

    //this.handleClose;
    NotificationManager.success('Project Created Successfully!');

  }
  catch (error) {
    //console.log('error: ', error);
    console.log(error)
  }
}

希望我在这里尽可能清楚地表达

Answer 1

您的 checkUniqueName() 函数可以重写为:

checkUniqueName = async () => {
  const projectName = this.state.projectData.title;
  const companyName = this.state.companyName;
  const projectRef = fireStore.collection('PROJECT')
  const qsMatchingProjects = await projectRef.where("ProjectName", "==", projectName).where("CompanyName", "==", companyName).get();

  if (qsMatchingProjects.empty) {
    this.insert();
  } else {
    NotificationManager.error('this project already exists');
  }
}