Home > Web Front-end > JS Tutorial > body text

Problem with hook (useParams)

DDD
Release: 2024-09-13 08:16:02
Original
1165 people have browsed it

Hi. Having a problem with my code, for some reason the hook won't assign the data to my variables even though the url is loading perfectly.

Problem with hook (useParams)

I'll place the snippets of my code that affect this as well as the api which is working perfectly.

API (EXAMPLE):
http://127.0.0.1:8000/api/inventory/item/raw_material/1/

APP.js

 <div className="App-container_map">
          {selectedProduct ? (
            <Routes>
              {/* Define the routes for each category */}
              <Route 
                path="/raw_material" <------
                element={<RawMaterial onReset={handleResetProduct} />} 
              />
              <Route 
                path="/consumibles" <------
                element={<Consumibles onReset={handleResetProduct} />} 
              />
              {/* Add more routes for other categories as needed */}
            </Routes>
          ) : (
            <div>
              <Link to={'/Inventory'}>
                <button>Inventory</button>
              </Link>
              <Link to="/">
                <button>Some Other Subject</button>
              </Link>
            </div>
          )}
        </div>
Copy after login

RawMaterial.JS

const RawMaterial = ({ onReset }) => {
  const { category, id } = useParams()
  const [ productDetails, setProductDetails ] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchDetailedItem = async () => {
      try {
        const details = await fetchSpecificDetailedItem(category, id);
        setProductDetails(details);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };
Copy after login

API.js

export const fetchSpecificDetailedItem = async (category, id) => {
  if (!category || !id) {
    console.error('Error: Category or ID is not defined', { category, id });
    throw new Error('Category or ID is not defined');
  }
  try {
    const url = `${BASE_URL}/item/${category.toLowerCase()}/${id}/`;
    console.log('Requesting URL:', url);
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error('Error fetching specific item details:', error);
    throw error;
  }
};
Copy after login

If more info is needed, I'll provide it.
When I make the console.log for the url, the exact same url appears, which is why the problem must be somewhere in here, I don't know.

Also, I did't use "/raw_material/id/" for the path because when I use my click function, nothing happens; react seems to no see any path there.

The above is the detailed content of Problem with hook (useParams). For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template