1

estoy utilizando el hook de useParams pero este me devuelve undefined, en lugar de devolverme un número.

 const App = () => {
 return (

   <BrowserRouter> 
   <Navegador/>
   <Routes>
   
  <Route path='/' element= {<ItemListContainer/>}/>

<Route path='/productos/:categoriaId'  element= {<ItemListContainer/>}/>
<Route path='/item/:itemId'  element= {<ItemDetailContainer/>}/> 
   
   </Routes>
  </BrowserRouter>

 )
}

Aqui utilizo el useParam para obtener el itemId.

import { useEffect, useState } from "react"
import { pedirDatos } from "../../helpers/pedirDatos"
import { useParams } from 'react-router-dom'
import '../../assets/styles/item.css'
import ItemDetail from "../ItemDetail/ItemDetail"


export const ItemDetailContainer = () => {
const { itemId } = useParams();

const [item, setItem] = useState(null)
const [loading, setLoading] = useState(true)

console.log(item);

useEffect(() => {
    setLoading(true)
    pedirDatos()
        .then((res) => {
            setItem(res.find((prod) => prod.id === Number(itemId) ))
        })
        .catch(err => console.log (err))
        .finally(() => {
            setLoading(false)
        })
}, [itemId, setLoading])

return (

    <div>

        {loading ? <div className="spinner"></div>
            : <ItemDetail item={item} />}
    </div>
 )
}

Si hago un console.log del itemId me sale "NaN" y si le saco el parseo a número me sale la palabra "id".. no sé como arreglarlo. Debería dar como resultado un número que coincida con prod.id, pero por alguna razón no lo esta tomando así..

El link:

<Link to={`/item/id`}>
0

1 respuesta 1

2

Ese código está perfecto, para mi le estas errando en el Link to, que te lleva a /item/6 por ejemplo, debería ser algo así:

 <Link to={`/item/${id}`}>

y vos de debes de tener algo asi:

<Link to={`/item/id`}>

y por eso te aparece la palabra id.

1
  • 1
    Era exactamente eso lo que pasaba, me di cuenta un momento después de publicar jaja gracias! Commented el 4 sept. 2022 a las 3:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.