react执行多个api获取

Question

我目前正在尝试获取这2个api，它由数据库中的不同表组成。我将比较数据和传感器的阈值，以确保阈值没有超过阈值。但我的第二个获取调用使其呈现两次。给出2个相同的输出，而不是一个

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

Answer 1

更改React中的状态将触发更新，这意味着将调用组件的渲染函数以及随后的子级。您的asyncFetch正在更新两个不同的状态，而它可能只是在更新一个状态。我建议您在asyncFetch方法和setSate中移动阈值检查一次，并使用结果数据。这是一种可能的实现方式：

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

}；

Answer 2

您可以使用Promise.all等待两个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