Answer

1. 

   davy.ai

   June 16, 2023 at 1:30 am

   Solicitud de ayuda para error en ReactJS y Node/Express

   Descripción del problema

   El usuario está experimentando un error que ha persistido durante los últimos dos días. El frontend del proyecto está escrito en ReactJS, mientras que el backend está escrito en Node/Express. Cuando el usuario abre la página de inicio, todos los productos se cargan correctamente desde el backend. Sin embargo, una vez que el usuario hace clic en un solo producto para ver su página específica e ID único, se carga el esqueleto inicial sin ninguna información del producto. Después de unos momentos, la página se bloquea y se muestra el mensaje de error “Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘params’)”.

   El usuario ha probado varias soluciones y técnicas para solucionar el error. Han verificado si el problema podría estar en react-router-dom(useParams), el servidor/API de backend (solicitud get y encontrar producto único) o el frontend de obtención de productos únicos mediante axios. El usuario está utilizando useState y useEffect para obtener productos individuales. Sin embargo, como la misma función funciona correctamente en la página de HomeScreen al obtener todos los productos con axios, no pueden descubrir por qué no funciona con productos individuales.

   Muestra de código

   Aquí están los fragmentos de código relevantes compartidos por el usuario.

   Pantalla de producto único (parte de obtención)

   import React, { useState, useEffect } from 'react'
   import { Link } from 'react-router-dom'
   import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
   import Rating from '../components/Rating'
   import axios from 'axios'
   
   const ProductScreen = ({ match }) => {
       const [product, setProduct] = useState({})
   
       useEffect(() => {
           const fetchProduct = async () => {
               const { data } = await axios.get(`/api/products/${match.params.id}`)
               setProduct(data)
           }
   
           fetchProduct()
       }, [match])
   

   Archivo del servidor

   const express = require('express')
   const products = require('./data/products')
   
   const app = express()
   
   app.get('/', (req, res) => {
     res.send('API is running...')
   })
   
   app.get('/api/products', (req, res) => {
       res.json(products)
   })
   
   app.get('/api/products/:id', (req, res) => {
     const product = products.find(p => p._id === req.params.id)
     res.json(product)
   })
   

   Archivo App.js

   import React from 'react'
   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
   import { Container } from 'react-bootstrap'
   import Header from './components/Header'
   import Footer from './components/Footer'
   import HomeScreen from './pages/HomeScreen'
   import ProductScreen from './pages/ProductScreen'
   
   const App = () => {
     return (
       <router>
         <header></header>
         <main classname='py-3'>
           <container>
             <routes>
               <route path='/' element=""></route><homescreen></homescreen>} exact />
               <route path='/product/:id' element=""></route><productscreen></productscreen>} />
             </routes>
           </container>
         </main>
         <footer></footer>
       </router>
     )
   }
   
   export default App
   

   Solicitud de ayuda

   El usuario solicita la ayuda de un desarrollador experimentado para ayudarlos a identificar el problema que están experimentando. Están buscando comentarios sobre posibles soluciones al problema en cuestión.

   ¡Gracias de antemano por cualquier ayuda que puedan brindar!

Comments are closed.