类型错误：无法读取未定义的属性（读取“图像”）

Afonso 发表于 Dev

阿丰索

我在加载网页时出错。代码编译一切正常，但浏览器崩溃。遵循代码：

import {Card} from 'react-bootstrap'
function Product({ product }){
    return(
        <Card className="my-3 p-3 rounded">
            <a href={'/product/${product._id}'}>
                <Card.Img src={product.images}/>
            </a>

            <Card.Body>
                <a href={'/product/${product._id'}>
                    <Card.Title as="div">
                        <strong>{product.name}</strong>
                    </Card.Title>
                </a>

                <Card.Text as="div">
                    <div className="my-3">
                        {product.rating} from {product.numReviews} reviews
                    </div>
                </Card.Text>
            </Card.Body>
        </Card>
    )
}

export default Product

跟随错误：

 5 |    return(
   6 |        <Card className="my-3 p-3 rounded">
   7 |            <a href={'/product/${product._id}'}>
>  8 |                <Card.Img src={product.images}/>
     | ^   9 |            </a>
  10 | 
  11 |            <Card.Body>

TypeError: Cannot read properties of undefined (reading 'images')

有谁知道可能会发生什么？我已经检查过我是否指的是错误的文件，但一开始没问题

夏尔

我会添加一些条件，以确保在组件加载时数据在这里。

像这样的事情：

import {Card} from 'react-bootstrap'
function Product({ product }){
    return(
         <Card className="my-3 p-3 rounded">
            <a href={'/product/${product._id}'}>
               {Boolean(product?.images) && <Card.Img src={product.images}/>}
            </a>

            <Card.Body>
                <a href={'/product/${product._id'}>
                    <Card.Title as="div">
                        <strong>{product.name}</strong>
                    </Card.Title>
                </a>

                <Card.Text as="div">
                    <div className="my-3">
                        {product.rating} from {product.numReviews} reviews
                    </div>
                </Card.Text>
            </Card.Body>
        </Card>
    )
}

export default Product

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。