I am new to React. Trying to build random project.
I create one home page where I fetched data from API and set it to some state X.
Using react-router
, routed to Category
page where all categories are present.
Again, routed to particular category.
Here all items are visible of that category.
Till here, everything works fine, but when I am refreshing page on this Items
page, suddenly, all data is vanished.
Any idea what could be wrong?
App
useEffect(function () {
async function fetchData() {
try {
setIsLoading(true);
const res = await fetch(`${BASE_URL}/gahlot1999/fake-api/categories`);
const data = await res.json();
setData(data);
} catch {
alert('Error in loading data');
} finally {
setIsLoading(false);
}
}
fetchData();
}, []);
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route
path='/app'
element={<AppLayout data={data} isLoading={isLoading} />}
/>
<Route
path='app/:name'
element={<Category data={data} isLoading={isLoading} />}
/>
</Routes>
</BrowserRouter>
Category
return (
<div className={styles.container}>
<SideBar name={name} />
<ItemList name={name} data={data} isLoading={isLoading} />
</div>
);
ItemList
function ItemList({ name, data }) {
const items = data.filter(
(el) => name.toLowerCase() === el.name.toLowerCase(),
)[0].items;
return (
<ul className={styles.itemList}>
{items.map((el) => (
<Item item={el} key={crypto.randomUUID()} />
))}
</ul>
);
}
Item
function Item({ item }) {
return (
<li>
<p>{item.name}</p>
<p>{item.description}</p>
<p>{item.price}</p>
</li>
);
}
2
Answers
The
data
state should be initialized from localStorage whiledata
state updates are persisted to localStorage. When the page is loaded/reloaded, the last state that was persisted is provided as the initial state value. When the state updates auseEffect
hook persists the state to localStorage.Example:
It looks like the issue is related to the data fetching and how you handle the initial state in your application.
When you refresh the page on the "Items" page, the data fetched on the home page is lost because the component tree is re-rendered from the top. This means the data state in your App component becomes empty, causing an error when rendering the Category component.
To resolve this, you need to make sure that the data fetched in the Home component is available even after refreshing the page. One common approach is to use browser local storage or session storage to persist the fetched data across page refreshes.
Here’s a modified version of your code to handle data fetching and persistence using local storage:
In the App component, check if the data exists in local storage and use it as the initial state. If not, fetch the data and save it in local storage.
By using useState with a function as the initial state, you ensure that the data is fetched only on the first load or when the local storage is empty.
With this modification, when you refresh the "Items" page or navigate back to it, the data should be available from the local storage, preventing the data loss issue you were facing.