React - TypeError:无法读取未定义的属性“图像" [英] React - TypeError: Cannot read property 'image' of undefined
问题描述
所以我正在为一个副项目创建一个电子商务商店,但我遇到了一个问题.在主页上,我拥有所有产品,并为产品详细信息创建了一条路线.当我单击其中之一时,它会获取 id,并且应该输出所有产品详细信息.我在 JSON 数组data.js"中有关于产品的详细信息.
当我点击主页中的产品时,它显示错误:TypeError: Cannot read property 'image' of undefined
- 在 return
部分,其中我把 {product.image}
放进去.
但是,当我取消注释它检查产品是否存在的部分(ProductPage.js)时,它仍然输出Item不存在!"
,好像没有data.js"中有关产品的任何数据;文件.
App.js
ProductPage.js
从'react'导入React;从'../data'导入数据;导出默认函数 ProductPage(props) {const product = data.products.find((x) => x._id === props.match.params.id);//如果(!产品){//返回 项目不存在!//}返回 (<div><div className="row"><div className="col"><img src={product.image} alt={product.name}></img>
);}
Data.js
const 数据 = {产品:[{_id: 1,名称:'iPhone 11 Pro',类别:智能手机",图像:'/images/2.jpg',价格:949,评分:4.8,numReviews: 15,描述: 'testtesttesttesttesttesttest',},],};导出默认数据;
提前致谢.
您需要使用 withRouter 包装您的 ProductPage 组件以访问 props.match.params.id.
编辑:如果您打算使用 props.match.params.id 进行比较,请记住它是一个字符串
将您的 ProductPage 组件更改为:
从'react'导入React;从'../data'导入数据;从反应路由器"导入{withRouter};功能产品页面(道具){const product = data.products.find((x) => x._id === props.match.params.id);返回 (<div><div className="row"><div className="col"><img src={product.image} alt={product.name}></img>