javascript - 如何展示单品？

Question

再会，

我想问你如何在 React 中显示单个产品卡片/页面。我已经尝试过了，但没有成功。先感谢您：

 const product = products.find(x=> x.id === props.match.params.id)
    
    return(
        <div>
        <Nav/>
        <h1>product page</h1>
        <p>{Product.name}</p>

)

产品页面代码：

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

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

  
        
      
        

        </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(
        <div >
           <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>
        </div>
    )
}

导出 ProductsData 的默认产品代码：

export default  [
    {
        id: '1',
        name: 'product1',
        price: 30,
        img: 'data:image/jpeg;base64,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'
    },

    

]

标签： javascriptreactjserror-handlinge-commerceproduct

Answer 1

我在以下位置看到错误：ProductPage。如果要显示产品名称。它应该是：

<p>{product.name}</p>

或者你想展示产品卡：

  <div>
    <Nav/>
    <h1>product page</h1>
    <p>{product.name}</p>
    <Product/>
</div>