时间戳

首页 > 解决方案 > 使用 onClick 事件处理程序时不断调用自身

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

问题描述

我期望发生的事情： 当用户单击 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)
  }
}

希望我在这里尽可能清楚

标签： javascriptfirebasegoogle-cloud-firestore

解决方案

您的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');
  }
}

推荐阅读