Issue
Inside of my useEffect
hook I am trying to call an api request that is inside of .map
but the rest of the function isn't waiting for the response. I've tried making the .map
async
but then the rest of the function returns Promises
what is the correct way of doing this so that my api request can be called and then proceed with the rest of the code?
const getData = async (id) => {
const myData = await api.get(
'/api/request/id'
);
return myData;
};
useEffect(() => {
const myData = sampleData.map((item)
getData(item.id).then((response) => {
console.log(response.data.data);
return response.data.data
})
const myThings = myItem.things.map((thing) => {
if (thing.type === 'sampleType1') {
return [thing.name, thing.value];
} else (thing.type === 'sampleType2') {
return [
thing.name,
thing.content.name,
];
}
});
setData = {myThings, myData}
}, []);
Solution
You are going to want to wait for all those promises to resolve before mapping over them, so this is a great use case for Promise.all
:
useEffect(() => {
async function fetchData() {
const myData = await Promise.all(sampleData.map((item) =>
getData(item.id).then((response) => {
console.log(response.data.data);
return response.data.data
}));
const myThings = myItem.things.map((thing) => {
if (thing.type === 'sampleType1') {
return [thing.name, thing.value];
} else (thing.type === 'sampleType2') {
return [
thing.name,
thing.content.name,
];
}
});
setData = {myThings, myData}
}
fetchData();
}, []);
Answered By - Nick Answer Checked By - David Marino (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.