We Keep Coding

get data from async function to another function React JS

I have problem with async function. I need track.user in another function but my func getTracks() async. I don't have clue how can i get this.
const Player = ({trackUrl, index, cover, id}) => {
const [track, setTrack] = useState({})
const [user, setUser] = useState({})
useEffect(() => {
const getTracks = async () => {
await httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
})
}
getTracks();
getUser() // track.user undefined
}, [])
const getUser = async() => {
await httpClient.get(`/profile/${track.user}/`)
.then((response) => {
setUser(response.data);
})
}
}

I would declare both functions at the beginning of the component (you can later optimise them with useCallback but it's not that important in this phase).
const getTracks = async () => {
await httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
})
}
const getUser = async() => {
await httpClient.get(`/profile/${track.user}/`)
.then((response) => {
setUser(response.data);
})
}
I would then call an async function inside the useEffect hook. There are a couple of ways of doing it: you can either declare an async function in the useEffect hook and call it immediately, or you can call an anonymous async function. I prefer the latter for brevity, so here it is:
useEffect(() => {
(async () => {
await getTracks();
getUser();
})();
}, []);
Now when you call getUser you should be sure that getTracks has already set the track variable.
Here is the complete component:
const Player = ({trackUrl, index, cover, id}) => {
const [track, setTrack] = useState({})
const [user, setUser] = useState({})
const getTracks = async () => {
await httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
})
}
const getUser = async() => {
await httpClient.get(`/profile/${track.user}/`)
.then((response) => {
setUser(response.data);
})
}
useEffect(() => {
(async () => {
await getTracks();
getUser();
})();
}, []);
}
EDIT 07/18/22
Following Noel's comments and linked sandbox, I figured out that my answer wasn't working. The reason why it wasn't working is that the track variable was't available right after the getTrack() hook execution: it would have been available on the subsequent render.
My solution is to add a second useEffect hook that's executed every time the track variable changes. I have created two solutions with jsonplaceholder endpoints, one (see here) which preserves the most of the original solution but adds complexity, and another one (here) which simplifies a lot the code by decoupling the two methods from the setTrack and setUser hooks.
I'll paste here the simpler one, adapted to the OP requests.
export default function Player({ trackUrl, index, cover, id }) {
const [track, setTrack] = useState({});
const [user, setUser] = useState({});
const getTracks = async () => {
// only return the value of the call
return await httpClient.get(`/track/${id}`);
};
const getUser = async (track) => {
// take track as a parameter and call the endpoint
console.log(track, track.id, 'test');
return await httpClient.get(`profile/${track.user}`);
};
useEffect(() => {
(async () => {
const trackResult = await getTracks();
// we call setTrack outside of `getTracks`
setTrack(trackResult);
})();
}, []);
useEffect(() => {
(async () => {
if (track && Object.entries(track).length > 0) {
// we only call `getUser` if we are sure that track has at least one entry
const userResult = await getUser(track);
console.log(userResult);
setUser(userResult);
}
})();
}, [track]);
return (
<div className="App">{user && user.id ? user.id : "Not computed"}</div>
);
}

You can move the second request to the then block of the dependent first request,i.e., getTracks.
Also, you shouldn't mix then and await.
useEffect(() => {
const getTracks = () => {
httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
httpClient.get(`/profile/${response.data.user}/`)
.then((response) => {
setUser(response.data);
})
})
}
getTracks();
}, [])

You shouldn't be mixing thens with async/await. You should be using another useEffect that watches out for changes in the track state and then calls getUser with that new data.
function Player(props) {
const { trackUrl, index, cover, id } = props;
const [ track, setTrack ] = useState({});
const [ user, setUser ] = useState({});
async function getTracks(endpoint) {
const response = await httpClient.get(endpoint);
const data = await response.json();
setTrack(data);
}
async function getUser(endpoint) {
const response = await httpClient.get(endpoint);
const data = await response.json();
setUser(data);
}
useEffect(() => {
if (id) getTracks(`/track/${id}`);
}, []);
useEffect(() => {
if (track.user) getUser(`/profile/${track.user}`);
}, [track]);
}

React - How to properly load data with pagination

On start, I'm loading the data in useEffect like this:
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(12);
useEffect(() => {
const loadVehicles = async (dealershipId, id) => {
try {
const data = await getUserRequests(dealershipId, id, {
offset: (page - 1) * perPage,
limit: perPage,
});
setRequests(data.results);
} catch (err) {}
};
const loadUser = async (userId) => {
try {
const user = await getUserById(userId);
setSelectedUser(user);
} catch (err) {}
};
const loadData = async () => {
setIsLoading(true);
await loadVehicles(dealershipId, userId);
await loadUser(userId);
setIsLoading(false);
};
loadData();
}, [dealershipId, page, perPage, userId]);
Here, in the dependecy array I have "page" and "perPage", which are for pagination for vehicles. When I go to, for example, second page:
const changePageHandler = (pageNumber) => {
setPage(pageNumber);
};
page is updating, and then useEffect is calling. But the problem is that I just want to call loadVehicles() and not the loadUser() function.
And when I put loadVehicles(dealershipId, userId) function outside of the useEffect, and then call it after setPage(pageNumber), it's not getting the right page, because page is not updated yet.
How can I call only loadVehicles() with the correct page?

You should use another "useEffect" hook for handling page changes. Also it is better to define your functions outside your hooks so you can use them in other places as well.
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(12);
const loadVehicles = async (dealershipId, id) => {
try {
const data = await getUserRequests(dealershipId, id, {
offset: (page - 1) * perPage,
limit: perPage,
});
setRequests(data.results);
} catch (err) {}
};
const loadUser = async (userId) => {
try {
const user = await getUserById(userId);
setSelectedUser(user);
} catch (err) {}
};
const loadData = async () => {
setIsLoading(true);
await loadVehicles(dealershipId, userId);
await loadUser(userId);
setIsLoading(false);
};
useEffect(async() => {
await loadData();
}, [dealershipId, userId]);
useEffect(async() => {
setIsLoading(true);
await loadVehicles(dealershipId, userId);
setIsLoading(false);
}, [page, perPage]);
I am pretty sure you will understand the concept. The code above is just a hint.

Length is showing 0 even after using async and await keyword

I Dont know what is going on but even after using async and await keyword still the length is showing zero. Thanks in advance.
const commercial_shoots = [];
let test;
React.useEffect(() => {
async function fetchData() {
const app_ref = ref(storage, "Home/");
await listAll(app_ref)
.then((res) => {
res.items.forEach((itemRef) => {
getDownloadURL(itemRef).then((url) => {
commercial_shoots.push({ img: url });
});
});
})
.catch((error) => {
console.log(error);
});
}
fetchData();
}, []);
return <div>{commercial_shoots.length}</div>;
};

React only re-renders the component when state or props updates. Here, you are only updating a local variable. So, even when it updates, the UI does not reflect the change.
The solution would be to use commercialShoots as a state in the component.
const CommercialShoots = () => {
const [commercialShoots, setCommercialShoots] = useState([]);
useEffect(() => {
async function fetchData() {
try {
const app_ref = ref(storage, "Home/");
const res = await listAll(app_ref);
const downloadUrls = await Promise.all(res.items.map(itemRef) => getDownloadURL(itemRef));
const mappedUrlsToImg = downloadUrls.map((url) => ({ img: url });
setCommercialShoots(mappedUrlsToImg);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
return <div>{commercial_shoots.length}</div>;
};
NOTE - Since we are using async / await extensively, I took the liberty of updating the .then() to async / await syntax.

How to pass state from one useEffect to another useEffect on intial page load?

I have a component which displays products for a category. CategoryId is taken from subscribe method which is formed by pubsub pattern so I am waiting sub function to finish and passing to my API but it is not working on intial load of the page?
import { subscribe } from "./pubsub";
const Test = () => {
const [productId, setProductId] = useState({});
const [response, setResponse] = useState([]);
React.useEffect(() => {
function sub() {
return new Promise((resolve, reject) => {
subscribe("product-message", (data) => {
// console.log("Got some message", data);
// setProductId(data.productId);
resolve(data.productId);
});
});
}
async function fetchData() {
let message = await sub();
let response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${message.productId}` // Here I couldn't get the async data from above useEffect
);
console.log(response);
setResponse(response);
}
fetchData();
}, []);
return <div>{response.title}</div>; //It is not printing in intial load
};
export default Test;
So here is my sandbox link: https://codesandbox.io/s/happy-forest-to9pz?file=/src/test.jsx

If you only need the response, you do not need to store productId in state and then use it in another useEffeect to fetch data. You can simply implement the logic in one useEffec. Also note that you need to use the json response from fetch call so you need to use it like
let response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${productId}`
).then(res => res.json());
or
let res = await fetch(
`https://jsonplaceholder.typicode.com/todos/${productId}`
)
let response = await res.json();
Complete function will look like
const Test = () => {
const [response, setResponse] = useState([]);
React.useEffect(() => {
async function fetchData(productId) {
let response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${productId}`
).then(res => res.json());
console.log(response);
setResponse(response);
}
console.log("Api calls");
subscribe("product-message", (data) => {
// console.log("Got some message", data);
fetchData(data.productId);
});
}, []);
return <div>{response.title}</div>;
};
export default Test;
However if you need productId in your application, you can go via a multiple useEffect approach like you have tried in your sandbox. Also make sure that you are using thee fetch call correctly and also make sure to not make the API call wheen productId is not available
const Test = () => {
const [productId, setProductId] = useState({});
const [response, setResponse] = useState([]);
React.useEffect(() => {
console.log("Api calls");
subscribe("product-message", (data) => {
// console.log("Got some message", data);
setProductId(data.productId);
});
}, []);
React.useEffect(() => {
async function fetchData() {
const res = await fetch(
`https://jsonplaceholder.typicode.com/todos/${productId}` // Here I couldn't get the async data from above useEffect
);
const response = await res.json();
console.log(response);
setResponse(response);
}
if(productId) {
fetchData();
}
}, [productId]);
return <div>{response.title}</div>;
};
export default Test;
Working Sandbox

Fetch data from API with multiple React hook useEffect when second fetch use data from first hook

I'm learning how to use Hooks and I'm trying to fetch data from 2 sources with 2 hooks when the 2nd hook take as parameter the result from 1rst hook.
I know you can do that with class (multiple axios get) but I'm trying to do it with hooks.
I have a file where I've built my axios.get and a file where I try to render the data.
I try to put {user.id} into the second hooks but it doesn't work. When I put the value of the user id (for example '1') in the second hook it's working.
Long story short I try to find the best way to only show connected user objects...I'm not an expert so there is probably a better way to do that.
Any idea of how to do that ? Thanks for helping me !!!
Here is the code:
GetObjects.js:
export const getUser = async (id) => {
const url = `http://127.0.0.1:8000/api/user`;
try {
const response = await axios.get(url);
return { response, isError: false };
} catch (response) {
return { response, isError: true };
}
};
export const getUserObject = async (userId) => {
const url = `http://127.0.0.1:8000/api/objects/?owner=${userId}`;
try {
const response = await axios.get(url);
return { response, isError: false };
} catch (response) {
return { response, isError: true };
}
};
RenderObjects.js
...
function FetchUserObjects(props) {
const [objects, setObjects] = useState([]);
const [user, setuser] = useState([]);
useEffect(() => {
const loadUser = async () => {
const { response, isError } = await getUser();
if (isError) {
setuser([]);
} else {
setuser(response.data);
}
};
loadUser();
}, []);
useEffect(() => {
const loadObjects = async () => {
const { response, isError } = await getUserObject();
if (isError) {
setObjects([]);
} else {
setObjects(response.data);
}
};
loadObjects();
}, []);
so this is not working :
const { response, isError } = await getUserObject({user.id});
But this is working :
const { response, isError } = await getUserObject(1);

Try it:
function FetchUserObjects(props) {
const [objects, setObjects] = useState([]);
const [user, setuser] = useState([]);
useEffect(() => {
const loadUser = async () => {
const { response, isError } = await getUser();
if (isError) {
setuser([]);
} else {
setuser(response.data);
}
};
loadUser();
}, []);
useEffect(() => {
if (!user) return
const loadObjects = async () => {
const { response, isError } = await getUserObject(user.id);
if (isError) {
setObjects([]);
} else {
setObjects(response.data);
}
};
loadObjects();
}, [user]);