2017-06-13 60 views
0

我需要的是顯示所選產品的詳細信息,我使用的反應,終極版: 選擇一個產品,我的產品詳細頁面後應該顯示所選產品的詳細信息。我應該如何正確地使它以獲取和顯示產品的詳細信息JS做出反應,如何通過ID來獲得所選產品名稱

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { asyncConnect } from 'redux-connect'; 
import { connect } from 'react-redux'; 
import * as productActions from 'redux/modules/products'; 

@asyncConnect([{ 
    promise: ({ store: { dispatch, getState }, params }) => { 
    dispatch(productActions.load({ id: params.prodId }, getState())); 
    } 
}]) 
@connect(
    state => ({ 
    products: state.products.items 
    }), 
    { 
    ...productActions 
    } 
) 
export default class ProductDetails extends Component { 
    static propTypes = { 
    products: PropTypes.array.isRequired 
    }; 

    static defaultProps = { 
    products: [] 
    }; 

    state = { 
    products: [] 
    } 

    render() { 
    const { products } = this.props; 
    return (
     <div className="container"> 
     <div className="row"> 
      <div className="col-md-12"> 
      <h1>Product details</h1> 
      <div className="col-xs-12"> 
       <div className="row"> 
       <div className="col-xs-4"> 
        <div className="panel panel-default"> 
         <div className="panel-body"> 
         <p>{products.name}</p>// show selected product name 
         <p>{products.description}<p> // show selected product description 
         </div> 
        ))} 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 
+0

我設法解決問題,這是非常容易的:{產品[0]。名稱}和{產品[0]} .DESCRIPTION – Nuriddin

回答

0

我設法解決這個問題,這是非常容易的:

{products[0].name} 

{products[0].description} 
相關問題