import React from 'react' import { Link } from 'react-router-dom' import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap' import Rating from '../components/Rating' import products from '../products' function ProductScreen({ match }) { const product = products.find((p) => p._id === match.params.id) return ( <div> <Link to='/' className='btn btn-light my-3'>Go Back</Link> <Row> <Col md={6}> <Image src={product.image} alt={product.name} fluid /> </Col> <Col md={3}> <ListGroup variant="flush"> <ListGroup.Item> <h3>{product.name}</h3> </ListGroup.Item> <ListGroup.Item> <Rating value={product.rating} text={'${product.numReviews} reviews'} color={'#f8e825'} ></Rating> </ListGroup.Item> <ListGroup.Item> Price: ₹{product.price} </ListGroup.Item> <ListGroup.Item> Description: {product.description} </ListGroup.Item> </ListGroup> </Col> <Col md={3}> <Card> <ListGroup variant="flush"> <ListGroup.Item> <Row> <Col>Price:</Col> <Col> <strong>{product.price}</strong> </Col> </Row> </ListGroup.Item> <ListGroup.Item> <Row> <Col>Status:</Col> <Col> {product.countInStok > 0 ? 'In Stock' : 'Out of Stock'} </Col> </Row> </ListGroup.Item> <ListGroup.Item> <Button className='btn-block' type='button'> add to Cart </Button> </ListGroup.Item> </ListGroup> </Card> </Col> </Row> </div> ); } export default ProductScreenComo se señaló en el comentario, la variable de sus products tiene un valor undefined , por lo tanto, su código falla. Siempre se recomienda y es una buena práctica proteger su código y evitar fallas. Hay varias formas de protegerse de estas situaciones. Operador de encadenamiento opcional , o && lógico .
Así que podría usar algo como: return products && <div>...</div>; o, en algunos casos, le gustaría mostrar el cargador si obtiene datos: return !products ? 'Loading...' : <div>...</div; . O puede usar products?.myProp1 en cada lugar donde aparezca la variable de sus productos. Puede ser engorroso repetir lo mismo y tal vez desee protegerlo/manejarlo de manera diferente.
El producto no está definido, por lo que no puede leer ninguna de sus propiedades. para evitar que ocurra un error, verifique su valor antes de renderizar:
if(!product) return <></> return ( <div> <Link to='/' className='btn btn-light my-3'>Go Back</Link> <Row> <Col md={6}> <Image src={product.image} alt={product.name} fluid /> </Col> <Col md={3}> <ListGroup variant="flush"> <ListGroup.Item> <h3>{product.name}</h3> </ListGroup.Item> <ListGroup.Item> <Rating value={product.rating} text={'${product.numReviews} reviews'} color={'#f8e825'} ></Rating> </ListGroup.Item> <ListGroup.Item> Price: ₹{product.price} </ListGroup.Item> <ListGroup.Item> Description: {product.description} </ListGroup.Item> </ListGroup> </Col> <Col md={3}> <Card> <ListGroup variant="flush"> <ListGroup.Item> <Row> <Col>Price:</Col> <Col> <strong>{product.price}</strong> </Col> </Row> </ListGroup.Item> <ListGroup.Item> <Row> <Col>Status:</Col> <Col> {product.countInStok > 0 ? 'In Stock' : 'Out of Stock'} </Col> </Row> </ListGroup.Item> <ListGroup.Item> <Button className='btn-block' type='button'> add to Cart </Button> </ListGroup.Item> </ListGroup> </Card> </Col> </Row> </div>);