#reactjs #react-hooks #fetch #jsx #use-effect
Вопрос:
Я пытаюсь реализовать эту логику для условной выборки из API, я создал логику выборки внутри крючков useEffect, но я не могу вызвать их внутри своего компонента. Каков был бы правильный способ сделать это. Или каким другим способом я могу это сделать?
Для функций getF1,GetF2,getF3 я использовал блок try-catch, для этого не показан весь код
const myComponent = () => {
const [info, setInfo] = useState([]);
let venueName;
let cId;
useEffect(() => {
const getTData = async (tid) => {
try {
const response = await axios.get(url);
return response.data;
} catch (error) {
console.error(error);
}
};
const getCC = async (tid) => {
const t2data = await getTData(tid);
cId = t2data?.xyz;
console.log(cId);
};
getCC(tid);
async function getF1() {
const response = await fetch(url1);
}
async function getF2() {
const response = await fetch(url2);
}
async function getF3() {
const response = await fetch(url3);
}
getF1();
}, []);
const mainF = () => {
let res1 = info.filter((x) => x.fields.travelId == tid);
if (res1.length != 0) {
linkValue =
res1[0].a != undefined
? res1[0].a
: res1[0].b != undefined
? res1[0].b
: getF2();
let res2 = info.filter(
(x) => x.fields.colorId == cId
);
if (res2.length != 0) {
linkValue =
res2[0].a != undefined
? res2[0].a
: res2[0].b!= undefined
? res2[0].b
: getF3();
let res3 = info.filter((x) => x.fields.venue == venueName);
if (res3.length != 0) {
linkValue =
res3[0].a != undefined
? res3[0].a
: "www.google.com";
}
}
}
return linkValue;
};
let finalValue = mainF();
Комментарии:
1. сделайте функцию на стороне useEffect и вызовите ее изнутри useEffect. например, useEffect(() => { getCC(tid); getF1 ();}, []) Также, не уверен, но я думаю, что вам нужно сохранить имя пользователя, cId в состоянии.
2. должен ли я также сделать getF2, getF3 вне эффекта использования? Я называю их условно внутри mainF();
3. Да, вы можете попробовать с этим.. в противном случае, я думаю, это приведет к ошибке компиляции, например, функция не определена.
Ответ №1:
Попробуйте установить экземпляр и вызвать с помощью экземпляра эту функцию.
const myComponent = () => {
const [info, setInfo] = useState([]);
let venueName;
let cId;
const instance = this;
const getTData = async (tid) => {
try {
const response = await axios.get(url);
return response.data;
} catch (error) {
console.error(error);
}
};
const getCC = async (tid) => {
const t2data = await getTData(tid);
cId = t2data?.xyz;
console.log(cId);
return cId;
};
async function getF1() {
const response = await fetch(url1);
}
async function getF2() {
const response = await fetch(url2);
}
async function getF3() {
const response = await fetch(url3);
}
useEffect(() => {
getCC(tid);
getF1();
}, []);
const mainF = () => {
let res1 = info.filter((x) => x.fields.travelId == tid);
if (res1.length != 0) {
linkValue =
res1[0].a != undefined
? res1[0].a
: res1[0].b != undefined
? res1[0].b
: instance.getF2();
let res2 = info.filter(
(x) => x.fields.colorId == cId
);
if (res2.length != 0) {
linkValue =
res2[0].a != undefined
? res2[0].a
: res2[0].b!= undefined
? res2[0].b
: instance.getF3();
let res3 = info.filter((x) => x.fields.venue == venueName);
if (res3.length != 0) {
linkValue =
res3[0].a != undefined
? res3[0].a
: "www.google.com";
}
}
}
return linkValue;
};
let finalValue = mainF();
Комментарии:
1. попробовал, показать «Ошибка типа: не удается прочитать свойство ‘getF2’ неопределенного»
Ответ №2:
я думаю, что вам следует вызвать все эти функции вне useEffect, и тогда вы сможете использовать их везде, где они находятся внутри вашего компонента. И если вам нужен только результат от api, поэтому вместо возврата я бы посоветовал вам хранить его в одном состоянии и использовать внутри компонента.
Ответ №3:
Вы можете оставить свои функции снаружи или использовать эффект, а затем условно вызвать их внутри useEffect. И вы даже можете сохранить свой эффект использования отдельно для разных функций. Если у вас есть отдельный список зависимостей для каждой функции.
const myComponent = () => {
const [info, setInfo] = useState([]);
const [function1Success, setFunction1Success] = useState(false);
const [function2Success, setFunction2Success] = useState(false);
const [function3Success, setFunction3Success] = useState(false);
let venueName;
let cId;
const function1 = async() => {
const response = await fetch(url1);
if (condition to find response is success){
setFunction1Success(true);
}
}
const function2 = async() => {
const response = await fetch(url1);
if (condition to find response is success){
setFunction2Success(true);
}
}
const function2 = async() => {
const response = await fetch(url1);
if (condition to find response is success){
setFunction3Success(true);
}
}
// ADD THE BELOW CODE
useEffect(() => {
if(cond)function1();
}, [])
useEffect(() => {
if(cond amp;amp; function1Success)function2();
}, [function1]) // Here
useEffect(() => {
if(cond amp;amp; function2Success)function3();
}, [function2]) // Here
const mainF = () => {
let res1 = info.filter((x) => x.fields.travelId == tid);
if (res1.length != 0) {
linkValue =
res1[0].a != undefined
? res1[0].a
: res1[0].b != undefined
? res1[0].b
: getF2();
let res2 = info.filter(
(x) => x.fields.colorId == cId
);
if (res2.length != 0) {
linkValue =
res2[0].a != undefined
? res2[0].a
: res2[0].b!= undefined
? res2[0].b
: getF3();
let res3 = info.filter((x) => x.fields.venue == venueName);
if (res3.length != 0) {
linkValue =
res3[0].a != undefined
? res3[0].a
: "www.google.com";
}
}
}
return linkValue;
};
let finalValue = mainF();
Обновлено: Вызовите функцию 1 только после успешного выполнения функции 2 и так далее..
Затем вы можете использовать отдельный эффект использования для каждого вызова. И определите состояние для каждой функции, как в приведенном выше коде function1Success | function2Success | function3Success .
Если одна функция выполнена и результат будет успешным. Затем вы можете обновить состояние этой конкретной функции до true. Как будто function1 успех-это то, что вы превращаете состояние function1Success в истину.
И поскольку function1Success добавляется в список зависимостей useEffect, который несет function2 , функция 2 будет выполнена следующей. И так далее, и так далее, и так далее.
И мы даже проверяем, является ли function1Success истинным, прежде чем выполнять function2Success.
Комментарии:
1. Мои условия зависят от результатов вызова предыдущей функции. Пример: сначала я хочу сначала вызвать функцию 1 (), если она дает мне неопределенный или пустой результат, затем я вызываю функцию 2( ) для извлечения и так далее… в таком случае, как бы я поступил, есть какие-нибудь предложения?
2. Я попробовал это, но он попадает в бесконечный цикл и непрерывно продолжает печатать значение «finalValue»
3. @Айшвария, можешь поделиться своим кодом? Что ты пробовал?