Tengo el siguiente problema ¿Me ayudarían a resolverlo?: Realice una api en Node, con Express y mongoDb que es consumida desde una aplicación React, llamándola a través de un Fetch y me arroja el siguiente error en React 'Cannot read property 'params' of undefined' y en node sale 'GET /productos/ 304'
el código de la api al cual se llama es el siguiente:
getOne: async function(req,res,next){
try{
const producto = await productosSchema.findById({_id:req.params.id});
res.json(producto);
}catch(e){s
console.log('Un error en la lectura del producto:', e);
next(e);
}
}
y la ruta es router.get('/:id', productosController.getOne);
La api esta verificado con Postman y funciona muy bien.
En React tengo el siguiente código:
import React,{useState,useEffect} from "react"
import {Container} from 'react-bootstrap'
import Detalle from "../components/Detalle"
function DetallePage(props) {
const [producto,setProductos] = useState({})
const [cargando,setCargando] = useState(true)
useEffect(
()=>{
fetch("http://localhost:3000/productos/"+props.match.params.id)
.then(res=>res.json())
.then(producto=>{
console.log(producto)
setProductos(producto)
setCargando(false)
})
},[]
)
return (
<Container>
{
cargando &&
<div className="App">
Cargando ...
</div>
}
{
!cargando &&
<div className="App">
<Detalle key={producto.id} producto={producto} verDetalle={false} />
</div>
}
</Container>
);
}
export default DetallePage;
el error me sale exactamente en el params de ese Fetch.
su ruta en en App.js esta llamada así: <Route path="/:id" exact component={DetallePage} />
y el componente Detalle
al cual refiere es el siguiente:
import React from "react";
import { Card,Button } from 'react-bootstrap';
import {Link} from 'react-router-dom'
function Detalle(props){
const {producto,verDetalle} = props
console.log("producto",producto)
return(
<Card >
<Card.Body>
<Card.Img variant="top" src={producto.img} />
<Card.Title>{producto.nombreP}</Card.Title>
<Card.Text>
{producto.descripcion}
</Card.Text>
<Card.Text className='precio'>Precio: {producto.precio}</Card.Text>
<Card.Text>Disponibilidad: {producto.cantidad}</Card.Text>
{
verDetalle &&
<Link to={"/"+producto.id}><Button variant="primary">Ver Detalle</Button></Link>
}
</Card.Body>
</Card>
)
}
export default Detalle
Asique eso es todo lo que tengo, se que el error de llamado esta en React porque en la api funciona bien y devuelve el Json pero no encuentro el error de params por ningún lado. Les agradezco de corazón si me ayudan.