This content originally appeared on DEV Community and was authored by Marlon Jr.
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.
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>
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);
}
};
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;
}
};
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.
This content originally appeared on DEV Community and was authored by Marlon Jr.
Marlon Jr. | Sciencx (2024-09-12T23:27:58+00:00) Problem with hook (useParams). Retrieved from https://www.scien.cx/2024/09/12/problem-with-hook-useparams/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.