javascript - 我想在选择下拉选项后自动调用 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();
}, []);
解决方案
推荐阅读
- python - 间歇性 sqlalchemy drop_database 错误 (psycopg2.ProgrammingError) 必须是其进程被终止的角色的成员
- blueprism - 查找文件的 Blueprism 问题
- java - Java:创建没有匹配连续字符的字符串时索引超出范围异常
- c# - 我想为网站开发一个 CRUD 界面,但在 Edit 方法中不断出现错误
- botframework - 如何通过直线将活动从机器人对话框(c#)发送到客户端(角度)
- android - OnItemSelected 不适用于自定义微调器适配器类
- matlab - “double”类型的输入参数的未定义函数“taylorexp”
- file - 从 Kotlin 中的巨大文件中读取第一行
- java - spring boot 应用程序中配置的两个数据库
- elasticsearch - 松紧带。查找其子项与查询不匹配的文档