Recibo un error al mostrar un solo producto en la pantalla, el error se indica como-
Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'params')El código que está causando el error es
function ProductScreen({ match }) { const [product, setProduct] = useState({}) useEffect(() => { const fetchProduct = async () => { const { data } = await axios.get(`/api/products/${match.params.id}`) setProduct(data) } fetchProduct() }, [match])Supongo que el error es de match.params.id, pero estoy teniendo dificultades para resolver el error. ¿Alguien puede saber la solución a este error?
Pasaste props a ProductScreen pero props.match no está definido.
Intente darle a props.match un valor no vacío, entonces debería funcionar.
Luego use otras formas como useNavigate hook para acceder al historial y navegar. Consulte el documento oficial . v6.0.2 no pasa accesorios de historial y en match.params.id , la match no está undefined y es por eso que recibe este error cuando intenta acceder a match.params como undefined no puede tener una propiedad.
Tienes que manejarlo de otra manera.
El código anterior muestra el error: "'datos' no están definidos.eslintno-undef" y "'datos' se declaran pero su valor nunca se lee.ts(6133)"
Está recibiendo este error porque const tiene block scoped
if (match) { const { data } = await axios.get(`/api/products/${match.params.id}`) } setProduct(data)Las constantes tienen un alcance de bloque, al igual que las variables declaradas con la palabra clave let. El valor de una constante no se puede cambiar a través de la reasignación (es decir, usando el operador de asignación) y no se puede volver a declarar (es decir, a través de una declaración de variable).
Puedes manejarlo por,
let data; if (match) { ({ data } = await axios.get(`/api/products/${match.params.id}`)) } setProduct(data)Sugeriría que pueda revisar los conceptos básicos para una mejor comprensión.