0
708
ViewsTypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'imágenes')
Tengo este error justo después de corregir un "TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'params')" usando const { id } = useParams(); .
DetalleDeProducto.jsx
import React, { Fragment, useEffect } from 'react'; import Carousel from "react-material-ui-carousel"; import "./ProductDetails.css"; import {useSelector, useDispatch} from "react-redux"; import { getProductDetails } from '../../actions/productAction'; import { useParams } from 'react-router-dom'; const ProductDetails = ({}) => { const { id } = useParams(); const dispatch = useDispatch(); const { product, loading, error } = useSelector( (state) => state.productDetails ); useEffect(() => { dispatch(getProductDetails(id)); }, [dispatch, id]); return ( <Fragment> <div className="ProductDetails"> <div> <Carousel> {product.images && product.images.map((item, i) => ( <img className='CarouselImage' key={item.url} src={item.url} alt={`${i} Slide`} /> ))} </Carousel> </div> </div> </Fragment> ); }; export default ProductDetailsError de consola: lo siento, es un img, no sé cómo publicarlo
2 answers
Answer question0
product.images && product.images.map((item, i) =>(en esta línea el producto puede estar indefinido. si el producto puede o no estar presente ¿usar producto?.imágenes?.mapa
0
El error le informa que la variable del product no está definida.
Use una cláusula de verificación/guardia nula para protegerlo
product && product.images && product.images.map(.....o utilice el operador de encadenamiento opcional
product?.images?.map(..... Dado que este componente ProductDetails parece estar obteniendo los datos del product después de que se monta el componente, deberá evitar que el product no esté definido en la representación inicial y en cualquier representación posterior hasta que se complete el estado de productDetails . Aquí puede ser preferible renderizar condicionalmente nulo o algún indicador de carga mientras product no está definido.
Ejemplo:
const ProductDetails = () => { const { id } = useParams(); const dispatch = useDispatch(); const { product, loading, error } = useSelector( (state) => state.productDetails ); useEffect(() => { dispatch(getProductDetails(id)); }, [dispatch, id]); return ( <Fragment> <div className="ProductDetails"> <div> {product?.images ? ( <Carousel> {product.images?.map((item, i) => ( <img className='CarouselImage' key={item.url} src={item.url} alt={`${i} Slide`} /> ))} </Carousel> ) : ( <div>Fetching Product Details</div> ) } </div> </div> </Fragment> ); }; export default ProductDetails;