Actualmente estoy tratando de obtener esta API 2 que consta de una tabla diferente en mi base de datos. compararé los datos y el umbral de los sensores para asegurarme de que el umbral no supere el umbral. pero mi segunda llamada de búsqueda hace que se procese dos veces. dando 2 mismo resultado en lugar de uno
const TempGraph = () => { const [data, setData] = useState([]); // sound , temp, humidity , light , motion . const [thresholddata,setThresholdData] = useState([]); var result = []; // var i = 0; //const thresholds = '35'; function addZero(i) { if (i < 10) {i = "0" + i} return i; } useEffect(() => { const interval = setInterval(() => asyncFetch(),5000) //5000ms = 5sec return () => clearInterval(interval) // clear the interval everytime }, []); /* fetch specific sensor type */ const asyncFetch = async() => { await fetch('api') .then((response) => response.json()) .then((json) => setData( (json || []).map((item) => { const timeStamp = new Date(item.time); return { ...item, time: `${addZero(timeStamp.getHours())}:${addZero(timeStamp.getMinutes())}`, }; }) ) ) .catch((error) => { console.log('fetch data failed', error); }); //fetching threshold data await fetch('api') .then((response) => response.json()) .then((json)=>setThresholdData(json)) .catch((error) => { console.log('fetch threshold data failed',error); }); }; if(data.length != 0){ /* Loop through threshold table to get the same type id */ for(var x =0;x<thresholddata.length;x++){ // console.log(thresholddata[i]) if(thresholddata[x].typeid == data[data.length-1].typeid && thresholddata[x].sensorid == data[data.length-1].sensorid){ result = thresholddata[x]; console.log(result) } } /* notification when the data value is over the threshold */ if(result.upperthreshold < data[data.length-1].value){ openNotificationWithIcon('warning',data[data.length-1].location); } } /* graph here */ }Cambiar el estado en React activará una actualización, lo que significa que se llamará a la función de renderizado del componente, así como a los elementos secundarios posteriores. Su asyncFetch está actualizando dos estados diferentes cuando podría estar actualizando solo uno. Le recomendaría que mueva la verificación de umbral dentro del método asyncFetch y setSate una vez con los datos resultantes. Esta es una posible implementación:
const [result, setResult] = useState([]); const asyncFetch = async() => { let calculationResult = []; const data = await fetch('api') .then((response) => response.json()) .catch((error) => { console.log('fetch data failed', error); }); const thresholdData = await fetch('api') .then((response) => response.json()) .catch((error) => { console.log('fetch threshold data failed',error); }); for(var x =0;x<thresholddata.length;x++){ if(thresholddata[x].typeid == data[data.length-1].typeid && thresholddata[x].sensorid == data[data.length-1].sensorid){ calulationResult= thresholddata[x]; } } if(calulationResult.upperthreshold < data[data.length-1].value){ openNotificationWithIcon('warning',data[data.length-1].location); } setResult(calulationResult);};
Puede usar Promise.all para esperar el éxito de dos llamadas API
const listPackage = await fetch( 'https://messenger.stipop.io/v1/package/new?userId=9937&pageNumber=1&lang=en&countryCode=US&limit=10', { method: 'GET', headers: { Accept: 'application/json', 'Content-Type': 'application/json', apikey: '95c020d1623c0b51c8a63977e87fcf6d', }, }, ); const listPackageJson = await listPackage.json(); const data = listPackageJson?.body?.packageList?.map( async (item) => { return await fetch( `https://messenger.stipop.io/v1/package/${item.packageId}?userId=xxx`, { method: 'GET', headers: { Accept: 'application/json', 'Content-Type': 'application/json', apikey: '95c020d1623c0b51c8a63977e87fcf6d', }, }, ); }, ); const dataPromise = await Promise.all(data); const dataPromiseJson = await Promise.all( dataPromise.map(async (item) => await item.json()), ); const dataPromiseJsonFormat = dataPromiseJson.map((itemPackage) => { const pack = itemPackage?.body?.package; const sticker = pack?.stickers.map((item) => ({ image: item.stickerImg, id: item.stickerId, })); return { code: pack?.packageName, image: pack?.packageImg, id: pack?.packageId, list: sticker, name: { en: pack?.packageName, vi: pack?.packageName, }, }; }); //Set State here