首页 > 解决方案 > 我想在选择下拉选项后自动调用 api

问题描述

我想调用 emailClick(),changeDate() 一次,但它会无限重新渲染。getClient() 这个api负责获取客户端数据。

这是下面的客户数据。

[
    {
        "_id": "617fa2b70a1cbd13362f3146",
        "client_name": "company1",
        "billing_company_name": "company1",
        "billing_addresS": "city1"
    },
    {
        "_id": "617fa5445e22ff2460b93583",
        "client_name": "company2",
        "billing_company_name": "company2",
        "billing_addresS": "city2"
    },
    {
        "_id": "617fa5ae5e22ff2460b93584",
        "client_name": "company3",
        "billing_company_name": "company3",
        "billing_addresS": "city3"
    }
]

emailClick()这负责通过使用联系人集合中的 lient "_id" 获取电子邮件 ID 这是联系人集合数据。

[
    {
        "_id": "617fa8a60a1cbd13362f314c",
        "first_name": "Mike",
        "last_name": "Jhon",
        "email": "mike@gmail.com",
        "phone_number": 000111222333,
        "client_id": "617fa2b70a1cbd13362f3146",
        "client_name": "company1"
    },
    {
        "_id": "617faa7c5e22ff2460b93585",
        "first_name": "Simon",
        "last_name": "Jhon",
        "email": "simon@gmail.com",
        "phone_number": 444555666777,
        "client_id": "617fa5ae5e22ff2460b93584",
        "client_name": "Company3"
    },
    {
        "_id": "6180b75b21d11d268cddd317",
        "first_name": "Nilson",
        "last_name": "Tesla",
        "email": "nilson@gmail.com",
        "phone_number": 888999000111,
        "client_id": "617fa2b70a1cbd13362f3146",
        "client_name": "company1"
    }
]
function handleHolidayChange(obj) {
  console.log('This is object country', obj);

  setHday(obj);
  setHid(obj._id);
  setDate(null);
}

//client call (repetadely call)
const onChangeClient = (obj) => {
  console.log('client object', obj);
  console.log('client object id', obj._id);
  setClientValue(obj);
  setClientId(obj._id);
  setClientname(obj.client_name);
};
// console.log("This is client id and name", clientId + " " + clientname);

//(issues repetadely execute)

async function emailClick() {
  const url = `http://localhost:3002/api/getClientEmail/${clientId}/${clientname}`;
  Axios.get(url)
    .then((response) => {
      const temp = response.data.map((e) => e.email);
      setCemail(temp);
      console.log('Client Email', cemail);
    })
    .catch((error) => {
      console.log(error);
    });
}
emailClick();

const changeDate = async function dateClick() {
  const url = `http://localhost:3002/api/holiday_date/${hid}`;
  await Axios.get(url)
    .then((response) => {
      // console.log("This is holiday date",response.data[0]['date_of_holiday']);
      setDate(response.data.date_of_holiday);
      // console.log("holiday year",date);
    })
    .catch((error) => {
      console.log(error);
    });
};
changeDate();

useEffect(() => {
  async function getHoliday() {
    const url = `http://localhost:3002/api/holidays`;
    await Axios.get(url)
      .then((response) => {
        setHdata(response.data);
        console.log('this is holiday', response.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  getHoliday();

  async function getClient() {
    const url = `http://localhost:3002/api/client`;
    await Axios.get(url)
      .then((response) => {
        setClient(response.data);
        console.log('this is client', response.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  getClient();
  ///api/emailtemplates
  async function getClientEmail() {
    const url = `http://localhost:3002/api/emailtemplates`;
    await Axios.get(url)
      .then((response) => {
        setClientEmail(response.data.map((e) => e.subject));
      })
      .catch((err) => {
        console.log(err);
      });
  }
  getClientEmail();
}, []);

标签: javascriptreactjs

解决方案


推荐阅读