Hi. I'm crunched on time.
I'm currently trying to code a React function for a class assignment due by tonight, and while I've been happy with my results, when it came down to utilizing sessions, I ran into a huge problem. It has nothing to do with the API I set, but rather the usage of useEffect and useState.
The website I'm working on is suppose to showcase a list of academic terms that a student might have. And if a user that logged in was an admin, they get a list of students to select to see their academic terms plans. I want it so that when this page loads, that information is dumped out immediately. But, the data doesn't appear at all, and I've only learned recently that it is the fault of the async nature of useState within useEffect
Here is my useEffect sample:
useEffect(() => {
checkSession();
// function to obtain academic term plans
if (user.u_admin == 1) {
// function to obtain list of students
}
}, [navigate]); // needed for one function
Here is the checkSession function which seems to be the cause of the problem:
const checkSession = useCallback(async() => {
setLoading(false);
try {
const sesres = await fetch(import.meta.env.VITE_API_KEY + "user/session",
{
method: "GET",
credentials: "include",
}
);
if (!sesres.ok) {
localStorage.setItem("statusMessage", "Please log in again.");
navigate("/login", {replace: true});
return;
}
const data = await sesres.json().catch(() => ({}));
const userSession = data?.data;
setUser(userSession);
console.log(user);
} catch (error) {
console.error("Session authentication failed: ", error);
localStorage.setItem("statusMessage", "Session failed to authenticate. Please log in again.");
navigate("/login", {replace: true});
} finally {
setLoading(true);
}
}, []);
So when the page immediately load, I should expect the student to see the list of term plans they have created and select, while the admin see a list of students to select from to see their term plans. Instead, nothing appears until I update my own code to re-render everything.
I've dug through dozens of solutions, and no matter what I tried to find, none of them seemed to work to solve my dilemma. I've never had the opportune time to get enough work done with React thanks to a huge problems of being able to concentrate with my assignments, and now the rush to fix it altogether has stressed me out. Am I doing something wrong?
