react doing multiple api fetch

Question

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 */
}

Nicholas Barfknecht · Accepted Answer · 2022-03-08 10:23:31Z

1

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);

};

edited Mar 8, 2022 at 10:23

answered Mar 8, 2022 at 10:17

Nicholas Barfknecht

1767 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JJJJJJ Over a year ago

I have updated my source code. as there is some configuration on my first API . will I still be able to use const data for my first API call?

JJJJJJ Over a year ago

and my graph below which is after the asyncfetch will require the use for the data from the first api call

Anhdevit · Accepted Answer · 2022-03-08 10:53:17Z

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

Collectives™ on Stack Overflow

react doing multiple api fetch

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related