Блог

Главная - Вопросы по программированию - Не удается отобразить название продукта, цену и т.д. в productdetails

Не удается отобразить название продукта, цену и т.д. в productdetails

#javascript #html #css #reactjs #jsx

#javascript #HTML #css #reactjs #jsx

Вопрос:

Добрый день,

Кажется, я не могу отобразить свою страницу productdetailspage. Когда я пытаюсь поместить product.name или product.price в <p> или <h1> , это выдает следующую ошибку:

Ошибка типа: не удается прочитать свойство ‘name’ неопределенного

Что может вызвать эту проблему? Заранее благодарю вас за ваши ответы. Я также пытался использовать компонент 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

Ответ №1:

Причина этого .find() возвращается undefined , для обработки вы можете сделать как:

 <h1>product page</h1>
{product amp;amp; product.name}

Или, если вы хотите добавить приятное сообщение в null или undefined случае, вы можете обработать как:

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

Комментарии:

1. исправлена ошибка, но если я использую {product amp;amp; product.name } он возвращает undefined. Есть предложения?

Ответ №2:

Я ненавижу себя!

когда я связывал страницу продукта, я сделал это:

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

это должно было быть так:

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

я потратил 2 месяца, пытаясь решить проблему. И все это время была ошибка типа.