Problem with hook (useParams)-JS Tutorial-php.cn

Problem with hook (useParams)

DDD

Release： 2024-09-13 08:16:02

Original

1147 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!