React报TypeError: Cannot read properties of undefined (reading 'images')如何解决？

问题原因 #

这个报错的核心是你的Product组件接收到的product参数为undefined，和文件引用路径无关。常见触发场景如下：

• 父组件调用Product时没有传递product属性，或者属性名拼写错误
• product数据是异步请求获取的，初始状态下product为undefined，异步请求返回前组件已经触发渲染，直接访问undefined的images属性就会抛出错误
• 后端返回的product数据结构异常，比如返回null而非预期的对象结构

修复方案 #

1. 首先给所有product属性访问加上可选链操作符兜底，避免属性不存在时直接崩溃，同时修正你代码里的两处语法问题（模板字符串用错引号、第二个href少写右大括号），修复后的代码如下：

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

2. 给组件参数添加默认值，避免未传参时直接拿到undefined：

// 把组件参数声明改成如下写法
function Product({ product = {} }){

3. 在父组件加加载判断，异步请求拿到product数据之前，不渲染Product组件，或者渲染加载占位符。

内容的提问来源于stack exchange，提问作者afonso