0

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.

1 respuesta 1

0

Bueno al final después de 2 días buscando encontré el MUY TONTO problema (va cara de furia y llanto por el tiempo perdido jaja).

Resulta que tenia una pagina llamada InicioPage.js que utilizaba el componente Detalle, dentro de InicioPage el pedido de import estaba justamente importando la pagina DetallePage.js import Detalle from "./DetallePage.js". En vez de importar el componente Detalle.js import Detalle from "../components/Detalle"

Por supuesto no había ninguna orientación al respeto en el mensaje de error, salvo que el error supuestamente era de Params y estaba en la pagina DetallePage.js

Me tiro un error poco preciso. En fin espero que les sirva a quien pase por lo mismo. Saludos!

3
  • Que bueno que ya se resolvió tu problema, aunque yo veo un problema con las dependencias del Hook useEffect, saludos.
    – g.4
    Commented el 19 feb. 2021 a las 18:08
  • Hola, llegue a leer tu comentario anterior, pero en realidad no hay problema en eso que vos planteas, yo estoy usando el useEffect como un ComponentDidMount useEffect(()=>{/*codigo*/},[]; , en el caso que yo quisiera usarlo como un ComponentDidUpdate ahí si seria necesario poner los parametros entre los corchetes. useEffect(()=>{/*codigo*/},[variable/texto/algo];
    – Lourdes
    Commented el 19 feb. 2021 a las 18:36
  • Muy bien, gracias por compartir ese dato, me quede con la duda pues revise el caso de mi lado, pero en otras condiciones de uso. Saludos
    – g.4
    Commented el 19 feb. 2021 a las 18:39

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.