レンダリングメソッドに複数のオブジェクトのキーデータを表示する方法は？

Question

私は、それぞれが以下のキーitem:"Hoodie" price:25 size:"large"を含む複数のオブジェクトを含む配列を持っています。私はこのデータをレンダリングしたいのですが、配列をループして各オブジェクトのデータをリストに表示する方法を理解することはできません。これは私のコンポーネントです

import React, { Component } from 'react'; 
import {addCart} from './Shop'; 
import { removeCart } from '../../actions'; 
import { connect } from 'react-redux'; 

export class Cart extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {items: this.props.cart,cart: [],total: 0}; 
    } 

    ... 

    render() { 
     return(
      <div className= "Webcart" id="Webcart"> 
       <div> 
        {this.state.items.map((item, index) => (
         <li className='cartItems' key={index} /> 
        ))} 
       </div> 
       <div>{this.countTotal()}</div> 
      </div> 
     ); 
    } 
} 

... 

リスト内の各オブジェクトのデータ（項目名、価格、サイズ）をどのように表示できますか？あなたは正しい道にある

Answer 1

、ちょうどあなたのマップにこのコードを追加します。

{this.state.items.map((item, index) => { 
    return <li className='cartItems' key={'cartItems_'+index}> 
     <h4>{item.item}</h4> 
     <p>Size: {item.size}</p> 
     <p>Price: {item.price}</p> 
    </li> 
})} 

注リターンと<li />は、コンポーネントが、「ラッパー」またはあなたがそれを呼び出すことができていないこと。また、それを意味的に保つために、<div>の中の<li>要素を折り返してはいけませんが、<ul>ですが、それはちょうど脇の下です。