React项目Productdesscreen组件TypeError错误排查求助

错误原因 #

• 属性名不匹配：products数据里的产品ID字段是id，但Productdesscreen组件中用p._id匹配路由参数，导致find方法找不到对应产品，返回undefined，后续访问product.name触发TypeError。
• 未处理空值场景：即使ID匹配逻辑正确，当路由参数对应的产品不存在时，product仍会是undefined，直接访问其属性会报错。

解决方案 #

1. 修正ID匹配逻辑 #

把find方法中的属性名从_id改为id，和products数据的字段保持一致：

const product = products.find((p) => p.id === Number(id));

2. 添加空值校验 #

渲染产品信息前先判断product是否存在，避免访问undefined的属性，推荐两种写法：

方式一：可选链操作符（简洁版）

return (
    <div>
        {product?.name}
    </div>
);

方式二：条件渲染（支持自定义提示）

return (
    <div>
        {product ? product.name : "产品不存在"}
    </div>
);

修改后的完整Productdesscreen组件 #

import React from 'react'
import { useParams } from 'react-router-dom';
import products from '../products'

const Productdesscreen = () => {
    const { id } = useParams();
    const product = products.find((p) => p.id === Number(id));

    return (
        <div>
            {product?.name}
        </div>
    );
}

export default Productdesscreen;

内容的提问来源于stack exchange，提问作者afzal the gammer