i am currently trying to fetch this 2 api which consist of different table in my database. i will compare the data and the threshold of the sensors to make sure that the threshold do not exceed the threshold. but my second fetch call is making it render twice. giving 2 same output instead of one
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 */
}
Changing the state in React will trigger an update, which means the component's render function will be called, as well as the subsequent children. Your asyncFetch is updating two different states when it could just be updating one. I would recommend you move the threshold check inside of the asyncFetch method and setSate once with the resultant data. This is a possible implementation:
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);
};
You can use Promise.all to wait for two API call success
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