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

Ecom
1

I’m working on an e-commerce site using React, and the product details page isn’t being displayed even though there are no errors in the console. I attempted to pass the product ID with useParams, but it returns undefined.

Here’s a simplified version of my code:

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

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

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

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

export default ItemPage;

And here’s the action creator:

export const fetchItemDetails = (id) => async (dispatch) => {
  try {
    dispatch({ type: 'ITEM_DETAILS_REQUEST' });
    const response = await fetch(`/api/items/${id}`);
    const data = await response.json();
    dispatch({ type: 'ITEM_DETAILS_SUCCESS', payload: data.item });
  } catch (error) {
    dispatch({ type: 'ITEM_DETAILS_FAIL', payload: error.message });
  }
};

Does anyone have ideas on why the product details might not be showing?

2

I’ve encountered a similar issue before. Have you verified that your Redux store is properly set up and connected to your component? It’s possible that the state isn’t being updated correctly after the API call. Try adding some console.log statements in your reducer and action creator to trace the data flow.

Also, ensure that your API endpoint is correct and returning the expected data structure. If all else fails, you might want to consider using React Query or SWR for data fetching as they can simplify state management for API calls significantly.

3

Hey there RyanDragon22! :thinking:

Have you checked if your API is actually returning data? Sometimes the issue isn’t in the React code, but in the backend. Maybe try hitting the API endpoint directly in your browser or with a tool like Postman?

Also, I’m curious about your routing setup. How are you defining the route for this component? It might be worth double-checking that the route is correctly set up to pass the ID parameter.

Oh, and one more thing - in your useEffect, you’re checking for match?.params?.id, but in the code you shared, ‘match’ isn’t defined. Are you passing it as a prop somewhere else?

Let us know what you find out! Debugging can be frustrating, but we’ll figure it out together. :blush:

4

hey RyanDragon22, looks like ur using react-router-dom v5. in v6, match prop is gone. try using useParams hook instead:

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

const ItemPage = () => {
  const { id } = useParams();
  // rest of ur code...

this shud fix the undefined issue. lmk if u need more help!