React Data Not Loading on First Mount

17 Views Asked by At

Intro

Below is a more detailed rundown but essentially my data is not displaying until a refresh on first mount. I'm trying to force a reload with rerender but I dont know what I'm missing. . . . . .

Detailed

I am building a React app that shows users data related to their GitHub accounts using GitHub's API. I'm using AWS Amplify on the backend to trigger lambda functions which access the endpoints and from there I handle my json data.

After a user is redirected from GitHubs oauth/authorize they meet the component below. UserPageWrapper has two child components, Navbar and HomePage, although that shouldn't matter for this case. I'll still mention them for reassurance but Navbar simply takes in input which gets another users GitHub data and HomePage gets passed a few props which are set states from the functions in UserPageWrapper.

On first mount (top useEffect), the access token is saved to local storage so it's ready to be passed along with future API requests. I'm updating rerender from there which should trigger a page reload and the states should be set to return related data. What am I missing?

Note - I am still new to react so forgive me if any of my logic seems absurd.


const UserPageWrapper = () => {
    const [userData, setUserData] = useState({});                   // JSON     {}
    const [userRepos, setUserRepos] = useState([]);                 // Array    []

    const [rerender, setRerender] = useState(false)       

    // other states ...


    // Gets authentification token on first mount
    useEffect(() => {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString)
        const codeParam = urlParams.get('code')

        if (codeParam && (localStorage.getItem("accessToken") === null)){
            async function getAccessToken() {
                    await fetch("https://6xsg7yktw4.execute-api.us-east-2.amazonaws.com/staging/getAccessToken?code=" + codeParam, {
                    method:"GET"
                }).then((response) => {
                    return response.json()
                }).then((data) => {
                    if(data.access_token) {
                        localStorage.setItem("accessToken", data.access_token)

                **      setRerender(!rerender)    // Changing rerender to trigger 2nd useEffect
                    }
                })
            }
            getAccessToken()
        }
    }, [])

    // Handles user data and repo states
    useEffect(() => {
        // Fetches user and repo data
        const fetchData = async () => {
            setIsLoading(true); // Start loading

            let userInfo;               // User Info
            let repoScoreInfo;          // User repository Score
            let userRepoData
            try {
                // User searched in a user in navbar
                if (searchUserData){
                    if (searchUserData.message === "Not Found") {
                        return (<div>user not found</div>)
                    }
                    userInfo = searchUserData;
                    fetchUsers(userInfo.login)
                }
                // UserData is empty
                else if (Object.keys(userData).length === 0){
                    userInfo = await getUserData();
                    fetchUsers(userInfo.login)
                    userRepoData = await getRepoData(userInfo.login)
                    repoScoreInfo = await getRepoScoreInfo(userRepoData)
                    userExist(userInfo.login, userInfo.avatar_url, repoScoreInfo, userInfo.location)
                }
                // UserData is not empty - user clicked profile icon in navbar
                else {
                    fetchUsers(userData.login)
                    setIsLoading(false); // Start loading

                }
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        };
        fetchData();
**  }, [searchUserData, rerender, ]);       // 
    .
    .
    .
    . /// Below are all the functions that relate to my component
    ```
0

There are 0 best solutions below