无法在产品详情中显示产品名称、价格等答案

【问题标题】：Can't display product name, price,etc in productdetails无法在产品详情中显示产品名称、价格等
【发布时间】：2021-01-02 05:02:26
【问题描述】：

早安，

我似乎无法显示我的产品详细信息页面。当我尝试将product.name 或product.price 放入<p> 或<h1> 时，它给了我以下错误：

TypeError: 无法读取未定义的属性“名称”

什么会导致这个问题？预先感谢您的回答。我也尝试过使用 productcard 组件，但它显示的是：'product' 而不是产品的实际名称

产品页面：

import React from 'react'
import Nav from '../components/nav'
import products from '../data/products'
import Product from '../components/product'

function ProductPage(props){
    console.log(props.match.params.id)
    
    const product = products.find(product=> product.id === props.match.params.id)
   
    
    return(
        <div>
            <Nav/>
        <h1>product page</h1>
        {product.name}
        

  
        </div>  
    )
}

export default ProductPage

产品卡：

import React from 'react'
import Products from '../data/products'
import {Link} from 'react-router-dom'
function Product(props){
    function HandleSubmit(e){
        e.preventDefault()
        alert('added to cart !')
        
    }
    return(
        
           <ul className="products">
   
            {Products.map(product=> (
            <li key={product.id} className="product">
                <img src={product.img}></img>
               <a href={"/product/:" +  product.id}><h1>{product.name}</h1></a> 
                <p>price: €{product.price}</p>
                <form onSubmit={HandleSubmit}>
                <button>Add to cart</button> 
                </form>
                
                </li> 
                )
                
                )}
   
                 </ul>
       
    )
}
export default Product

App.js：

import React from 'react'

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import Home from './templates/home'
import Login from './templates/login'
import Store from './templates/store'
import ProductPage from './templates/productPage'
import Product from './components/product'



function App(){

  {document.title = 'Avesports'}

  return(
   
 
   
  <body>
   
         <Router>
        <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/login" component={Login}/>
        <Route path="/store" component={Store}/>
        <Route path={"/product/:id" } component={ProductPage}/>

        </Switch>
  
      </Router>
 </body>
  
   
     
   
  )
}


export default App

【问题讨论】：

标签： javascript html css reactjs jsx

【解决方案1】：

背后的原因是.find()返回了undefined，为了处理你可以这样做：

<h1>product page</h1>
{product && product.name}

或者如果你想在null或undefined的情况下添加一条漂亮的消息，你可以这样处理：

<h1>product page</h1>
{
  product ?
    product.name :
    <span>No product matched...</span>
}

【讨论】：

修复了错误，但如果我使用 {product && product.name} 它返回未定义。有什么建议吗？

【解决方案2】：

我讨厌自己！

当我链接产品页面时，我这样做了：

   <Link to={"/product/**:**" +  product.id}><h1>{product.name}</h1></Link>

应该是这样的：

<Link to={"/product/" +  product.id}><h1>{product.name}</h1></Link>

我浪费了 2 个月的时间来解决这个问题。而且一直都是类型错误。

【讨论】：