Struggling to display item specifics in my React-based online shop app. Any ideas?

Ecom
1

Hey everyone, I’m building an online store with React and I’ve hit a snag. I can’t get the item details to show up on my local server. The weird thing is, my console isn’t showing any errors.

I tried using the useParams hook to pass the info, but that just gave 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(() => {
    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?.name}</h1>
    </div>
  );
};

export default ItemPage;

I’ve also got an action file that handles the API calls. But even with all this set up, I’m not seeing any item details on the page. Any ideas what I might be missing?

2

It appears your issue might stem from how you’re accessing the item ID. Since you mentioned an ‘undefined params error’, I suspect the problem lies in your routing setup. Instead of relying on the match prop, try using the useParams hook from react-router-dom directly in your component.

Replace your current setup with:

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

const ItemPage = () => {
  const { id } = useParams();
  const dispatch = useDispatch();

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

  // Rest of your component logic
}

This should resolve the undefined params issue. Also, ensure your Redux actions and reducers are correctly handling the fetched data. If the problem persists, check your API endpoint and the structure of the response data.

3

yo dude, have u checked ur network tab in dev tools? sometimes the api call might be failing silently. also, make sure ur reducer is updating the state correctly after the fetch. if everything looks good there, maybe try adding a loading state to ur component while the data is being fetched. Good luck!

4

Hey there AdventurousHiker76! :national_park:

Hmm, that’s a tricky one. Have you double-checked that your Redux store is properly set up and connected to your component? Sometimes the issue can be hiding in the plumbing, so to speak.

Also, I’m curious about your routing setup. Are you using React Router? If so, which version? In newer versions, the match prop isn’t passed directly to components anymore. You might need to use the useParams hook from ‘react-router-dom’ instead.

Something like this maybe?

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

const ItemPage = () => {
  const { id } = useParams();
  // ... rest of your component
}

Oh, and one more thing - are you sure your API is returning the data you expect? Maybe throw in a console.log in your action creator to see what’s coming back from the server?

Let me know if any of that helps or if you need more ideas. Debugging can be a real head-scratcher sometimes!