Skip to main content
La pregunta estaba incompleta
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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`}>

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í..

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`}>
Origen Enlace

useParams hook da como resultado undefined en react

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í..