javascript - React state and table lost on refresh

Question

I am new to React. I have built an app as a PERN stack. I have a component that has an svg map that contains many regions. When the user clicks a region the selected region component loads a table with associated data from the server. I am using useContext to save the selected region id number so that when the user navigates to add a new entry component that region id state is passed on so that the new data will be handled correctly.

ISSUE: When the page is refreshed the state is lost, the table disappears, and it is just a blank page. The default state is empty. Console.log(state) returns the value, but after refresh is 'undefined'.

SOLUTIONS I HAVE TRIED: I have saved to localStorage, and I can see the region id in the local storage. I set up useEffect hooks to get and set the region id from local storage and it did not seem to work. I also tried hard coding a region id value into the axios params and it did not work. Very frustrating. I think that the issue is deeper than the state hooks as the server not refreshing on page reload. Not sure what to do next.

This is the localStorage and server call in one of my region components

    useEffect(() => {
       const regionID = localStorage.getItem("regionID");
          if (region) {
             setRegion(regionID);
          }
     }, []);

    useEffect(() => {
        localStorage.setItem("regionID", region);
    });

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await TrackerURL.get('/regional-table-values', {
                    params: {
                        region_id: '1'
                    },
                });
                setTracker(response.data.data.watertrack);
            } catch (err) {
                console.error(err.message);
            }
        };
        fetchData();
    }, [setTracker, region]);

This is in my map component to save to state and localStorage

const { setRegion } = useContext(TrackerContext);

    const handleOnClick = (id) => {
        setRegion(id); // Set the state in the context API
        localStorage.setItem('region-b2u6y42', `${id}`); // Set the local storage for region state persistance
    };

OUTCOME

I need the state preserved on reload, and when the user returns to the page. I have spent the last couple of days trying to resolve this issue and it is very frustrating. Please help. Thank you.

question from:https://stackoverflow.com/questions/65853108/react-state-and-table-lost-on-refresh

Answer 1

Waitting for answers