TypeError: Невозможно прочитать свойства неопределенного (чтение 'image')

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 ( Вернуться назад 

            <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>
);

}

экспорт экрана по умолчанию ProductScreen

введите описание изображения здесь

Как указано в комментарии, ваша переменная products имеет значение undefined, поэтому ваш код не работает. Всегда рекомендуется и является хорошей практикой защищать свой код и избегать сбоев. Есть несколько способов защитить себя от подобных ситуаций. Опциональный оператор цепочки, или логический &&.

Так что вы можете использовать что-то вроде: return products && <div>...</div>; или для некоторых случаев вы хотите показывать загрузчик при получении данных: return !products ? 'Loading...' : <div>...</div;. Или вы можете использовать products?.myProp1 в каждом месте, где появляется переменная ваших продуктов. Повторять одно и то же может быть обременительно, и, возможно, вы хотите защитить/обработать это по-другому.

product не определен, поэтому вы не можете прочитать его свойства. чтобы предотвратить эту ошибку, проверьте его значение перед рендерингом:

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>);
Вернуться на верх