如何解决类型错误:无法读取未定义的面的属性“参数”
import React from 'react'
import Product from '../product'
import {Row,Col,ListGroup,Button,Image}from 'react-bootstrap'
const ProductDetails = ({match}) => {
const product=Product.find((p)=>p._id === match.params.id)
return (
<div>
<Row>
<Col md={6} >
<Image src={product.image} alt={product.name} fluid />
</Col>
</Row>
</div>
)
}
export default ProductDetails
我正在创建一个简单的电子商务网站项目,并从 product.js 文件中导入产品列表,我想显示单个产品页面,但面临此错误,如 TypeError: Cannot read property 'params' of undefined . 所以帮我解决问题。
product.js
const products=[
{
_id:'1',name:'product 1',images: 'https://source.unsplash.com/random',description:' Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',price: 50,countInStock:10,rating:4.5,numReviews:12,},{
_id:'2',name:'product 2',description:'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',price:258,countInStock:7,rating:3.5,numReviews:25,{
_id:'3',name:'product 3',price:500,{
_id:'4',name:'product 4',price:1000,countInStock:8,rating:2.5,numReviews:9,]
export default products
这就是我在 App.js 中调用 ProductDetails 组件的方式
import React from 'react';
import{Route,BrowserRouter } from "react-router-dom"
import './App.css';
//import 'bootstrap/dist/css/bootstrap.min.css'
import ProductDetails from './screens/ProductDetails'
const App=() =>{
return (
<>
<Route path="/product/:id" >
<ProductDetails/>
</Route>
</>
);
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。