No estoy seguro de lo que me estoy perdiendo aquí. Hice algunas búsquedas sobre este error, pero no puedo encontrar nada que se ajuste a mi error. La página de la pantalla de inicio mostrará todas las imágenes. Antes de esto, cuando se hace clic en una sola imagen, se abrirá una nueva página para mostrar la imagen. Lo que estaba tratando de hacer es, cuando se hace clic en la imagen, me gustaría la imagen MÁS la información detallada de la imagen. Todo lo que obtengo es una página en blanco vacía con el error en las herramientas de desarrollo (ver más abajo). Gracias de antemano...
ProductScreen.js: 18 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'parámetros')
Aquí está el código:
import React, { useEffect } from 'react'; import Rating from '../components/Rating'; import { Link, useParams } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import LoadingBox from '../components/LoadingBox'; import MessageBox from '../components/MessageBox'; import { detailsProduct } from '../actions/productActions'; function ProductScreen(props) { const dispatch = useDispatch(); const { id } = useParams(); console.log("A", id); const productId = props.match.params.id; // this is the error as per dev tools console.log(props.match.params.id); const productDetails = useSelector((state) => state.productDetails); const { loading, error, product } = productDetails; useEffect = (() => { dispatch(detailsProduct(productId)); }, [dispatch, productId]); return ( //code here ) } export default ProductScreen; [1]: https://i.stack.imgur.com/jdshU.pngParece que no está pasando la match de accesorios al crear el elemento JSX de ProductScreen . Esta línea se verá así
<ProductScreen match={someMatchObj} />Como sugiere @mushroomator , también debe verificar si el valor no está definido.
@mushroomator
Este es mi JSX...
return ( <div> {loading ? ( <LoadingBox></LoadingBox> ) : error ? ( <MessageBox variant="danger">{error}</MessageBox> ) : ( <div> <Link to="/">Back To Result</Link> <div className="row top"> <div className="col-2"> <img className="large" src={product.image} alt={product.name} ></img> </div> <div className="col-1"> <ul> <li> <h1>{product.name}</h1> </li> <li> <Rating rating={product.rating} numReviews={product.numReviews} > </Rating> </li> <li> Price: ${product.price} </li> <li> Description: <p>{product.description}</p> </li> </ul> </div> <div className="col-1"> <div className="card card-body"> <ul> <li> <div className="row"> <div>Price</div> <div className="price">${product.price}</div> </div> </li> <li> <div className="row"> <div>Status</div> <div> {product.countInStock > 0 ? ( <span className="success">In Stock</span> ) : ( <span className="danger">Unavailable</span> )} </div> </div> </li> <li> <button className="primary block">Add to Cart</button> </li> </ul> </div> </div> </div> </div> )} </div> ) } export default ProductScreen;