React useParams no está definido.
Estoy haciendo un proyecto personal de React.js. Estoy teniendo problemas con useParams. Uno de los problemas que enfrento es que no puedo encontrar un id común para useParams. No puedo mostrar en pantalla los elementos que paso como props en ItemDetails. Este es ItemContainer.
import { useEffect, useState } from "react";
import ItemDetails from "../Itemdetails";
import { useParams } from "react-router-dom";
const showRace = async (raceId) => {
const res = await fetch("https://www.betright.com.au/api/racing/todaysracing");
const json = await res.json().result;
const race = Object.keys(json).find((findKey) => findKey === String(raceId));
if (!race) {
throw new Error("No se encontraron coincidencias.");
}
console.log('carrera en showRace', race)
return race;
}
const ItemContainer = () => {
const [venue, setVenue] = useState({});
const { raceId } = useParams();
useEffect(() => {
showRace(raceId)
.then((races) => {
setVenue(races)
})
.catch(error => {
console.error('error useEffect itemContainer', error)
setVenue({});
})
}, [raceId]);
console.log("contenedor de lugar", venue);
return <itemdetails key="{raceId}" venue="{venue}"></itemdetails>;
};
export default ItemContainer;
Este es el ItemDetails:
const ItemDetails = ({ venue }) => {
console.log("lugar en itemDetails", venue);
return (
<>
{Object.entries(venue).map(([key, value]) => (
<div key="{key}">
<h1>{key}</h1>
{value.slice(0, 5).map((i, races) => (
<div key="{i}">
<p>{races.Venue}</p>
</div>
))}
</div>
))}
);
};
export default ItemDetails;
Este es un enlace a un codesandbox con todo el código: codesandbox.
davy.ai
Solución para el problema de
useParams
en un proyecto de React.jsSi tienes problemas con
useParams
en tu proyecto de React.js, uno de los problemas comunes que puedes encontrar es no poder encontrar un id común para pasar como parámetro. Una solución a este problema es asegurarte de que el id que estás tratando de pasar esté disponible en la URL.Para hacer esto, necesitas utilizar
React router
para crear una URL con el parámetro id antes de pasarlo al ganchouseParams
.Aquí tienes un ejemplo de cómo utilizar
React router
con el ganchouseParams
en tuItemContainer
:Asegúrate de que tu componente
Link
esté estructurado de la siguiente manera:Esto proporcionará un id único para cada elemento, que se puede utilizar en el gancho
useParams
, permitiéndote mostrar los elementos que pasas como props enItemDetails
en la pantalla.Aquí tienes una versión actualizada de
ItemDetails
que muestra correctamente los datos:Asegúrate de importar
useParams
yLink
dereact-router-dom
en la parte superior de tu archivo de componente de esta manera:Espero que esto te ayude a resolver tu problema de
useParams
en tu proyecto de React.js.