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

Ecom
1

I’m working on a React-based online store and I’m stuck. The product details page won’t show up even though there are no errors in the console. I’ve tried using useParams to fetch the data but it’s giving me an ‘undefined params’ error. Here’s a simplified version of what I’m dealing with:

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 <h1>{item?.title}</h1>;
};

export default ItemPage;

In my actions file, I’m using axios to get the data from the backend. I’ve double-checked the API endpoint and it seems correct. Any ideas on what might be causing this issue or how I can troubleshoot it further?

2

hey mate, i had a similar prob with my react app. have u tried using the useParams hook? it’s pretty handy for grabbing route params. Also, make sure ur redux store is set up right and the fetchItemInfo action is workin properly. sometimes the issue is in the data flow, not the component itself. good luck!

3

Hey Jade72! This is a tricky one, isn’t it? :thinking:

I’m curious, have you tried logging the match object to see what’s actually in there? Sometimes it helps to break things down step by step.

Also, I wonder if you’re using the latest version of React Router? They’ve made some changes in recent versions that might affect how you access route params.

Oh, and here’s a thought - could it be something to do with how the route is set up in your main App component? Maybe the ID isn’t being passed correctly?

It’d be really interesting to see your Redux setup too. Sometimes the issue can be hiding in how the state is being managed. Have you checked if the action is being dispatched correctly?

What’s your backend API like? Are you sure it’s sending back the data in the format you’re expecting?

Keep us posted on what you find out! Debugging can be frustrating, but it’s also kinda fun when you finally crack it, right?

4

I’ve encountered similar issues before. It seems the problem might be with how you’re accessing the route parameters. Instead of using match.params, try using the useParams hook from react-router-dom. Here’s how you could modify your component:

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

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

  useEffect(() => {
    if (id) {
      dispatch(fetchItemInfo(id));
    }
  }, [dispatch, id]);

  if (isLoading) return <p>Loading...</p>;
  if (errorMsg) return <p>Error: {errorMsg}</p>;
  if (!item) return <p>No item found</p>;

  return <h1>{item.title}</h1>;
}

This approach should resolve the ‘undefined params’ error. Also, make sure your route is set up correctly in your main App component to pass the id parameter. If you’re still having issues, consider checking your Redux setup and the fetchItemInfo action to ensure the data is being properly dispatched and stored in the state.