React e-commerce app: Product details not rendering despite no console errors

Ecom
1

I’m building an online store with React. The product details page won’t show up even though there are no errors in the console. I’ve tried using useParams but it’s giving me an undefined params error. Here’s a simplified version of my code:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchItemInfo } from './storeActions';

const ItemPage = ({ match }) => {
  const dispatch = useDispatch();
  const { item, isLoading, errorMsg } = useSelector(state => state.itemInfo);

  useEffect(() => {
    console.log('Getting item info...');
    if (match?.params?.id) {
      dispatch(fetchItemInfo(match.params.id));
    }
  }, [dispatch, match]);

  console.log('Item info:', item);

  return (
    <div>
      <h1>{item?.title}</h1>
    </div>
  );
};

export default ItemPage;

I’ve also set up the Redux action to fetch the item details. Any ideas why the product info isn’t showing up on the page? I’m stumped!

2

yo iris85, hav u checked the network tab? sometimes the api fails silently. check if ur reducer updating state correctly after fetch. if not, add some console.logs in useEffect to verify its firing. react can be a bit tricky sometimes, so good luck debugging!

3

Have you verified that your Redux store is properly set up and connected to your component? It’s possible the issue lies there. You might want to use the Redux DevTools browser extension to inspect your store state and action dispatches in real-time. This can help pinpoint where the data flow breaks down.

Another thing to check is your API endpoint. Are you certain it’s returning the expected data? You could try making a direct API call using a tool like Postman to confirm the response structure.

Lastly, consider wrapping your component render in a conditional check:

return (
  <div>
    {item ? <h1>{item.title}</h1> : <p>Loading...</p>}
  </div>
);

This way, you can see if the issue is with rendering or data fetching. Hope this helps troubleshoot your problem.

4

Hey Iris85! :female_detective:

Hmm, that’s a tricky one! Have you checked if the fetchItemInfo action is actually being dispatched? Maybe try adding a console.log right before the dispatch to make sure it’s hitting that point.

Also, I’m curious about your routing setup. Are you using React Router? If so, which version? In newer versions, you might need to use useParams hook instead of accessing match.params.

Something like this maybe?

import { useParams } from 'react-router-dom';

const ItemPage = () => {
  const { id } = useParams();
  // ...
  useEffect(() => {
    if (id) {
      dispatch(fetchItemInfo(id));
    }
  }, [dispatch, id]);
  // ...
}

Oh, and one more thing - are you sure the item is actually in your Redux store after the fetch? Maybe the action isn’t updating the store correctly?

Let me know if any of these help or if you need more ideas! Debugging can be such a pain sometimes, right? :sweat_smile: