React e-commerce app: Product details not showing up, no console errors

Ecom
1

I’m working on an e-commerce site with React. I’m stuck trying to display product details from my backend. The page is blank, but 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 what I’m working with:

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

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

  useEffect(() => {
    if (match?.params?.id) {
      dispatch(fetchItemInfo(match.params.id));
    }
  }, [dispatch, match]);

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

export default ItemPage;

And in my actions file:

import axios from 'axios';
import { ITEM_REQUEST, ITEM_SUCCESS, ITEM_FAIL } from './constants';

export const fetchItemInfo = (id) => async (dispatch) => {
  try {
    dispatch({ type: ITEM_REQUEST });
    const { data } = await axios.get(`/api/items/${id}`);
    dispatch({ type: ITEM_SUCCESS, payload: data.item });
  } catch (error) {
    dispatch({ type: ITEM_FAIL, payload: error.message });
  }
};

Any ideas on why the product details aren’t showing up? I’m pretty sure my API is working correctly.

2

Based on your code, it seems the issue might be related to how you’re accessing the route parameters. If you’re using React Router v6, the syntax for accessing route params has changed. Instead of using match.params, you should use the useParams hook directly in your component.

Try modifying your ItemPage component like this:

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

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

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

  // Rest of your component code
}

This should resolve the ‘undefined params’ error. If you’re still not seeing the product details, make sure your Redux store is properly set up and that the item data is being correctly stored in the state after the API call.

3

Hey there! I’m curious about something in your code. Have you considered using React Query instead of Redux for managing your API calls and state? It might simplify things a bit.

Also, I noticed you’re not handling the loading or error states in your component. Maybe try something like:

if (isLoading) return <p>Loading...</p>;
if (error) return <p>Oops! Something went wrong: {error}</p>;
if (!item) return <p>No item found</p>;

This way, you’ll have a better idea of what’s happening while the data is being fetched.

Oh, and have you checked your network tab in the browser dev tools? Sometimes the API call might be failing silently. It’s worth a look!

What do you think about these suggestions? Have you tried anything else to debug this issue?