类型错误：无法读取未定义的面的属性“参数”

问题描述

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 (将#修改为@）