オブジェクトのリアクションレンダー配列

Question

私のページに製品配列をレンダリングする際に問題があり、何も表示されません。私はあなたではないので、それはです私のため

constructor(props) { 
    super(props) 
    var products = [ 
     { name: "Motorhead glasses", price: 300, amount: 1 }, 
     { name: "Judaspriest glasses", price: 499, amount: 1 } 
    ] 
    this.state = {products:[]} 


} 

render() { 
    return (
     <div className="order"> 
      { this.state.products.map(function(product, i) { 
        <div className="order-product" key={i}> 

         <h3 className="order-product_name">{product.name}</h3> 
         <div className="order-product_amount"> 

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

          </div> 
         </div> 
         <div className="order-product_price"><span className="l">Price</span><span className="right">${product.price}</span></div> 
        </div> 
       }) 
      } 

      <div className="order-summary"> 
       <h3>Order Summary</h3> 
       <div className="order-summary_summary"> 
        <p>Subtotal <span className="price">$300</span></p> 
        <p>Shipping <span className="price">$20</span></p> 
        <hr /> 
        <p>Total <span className="price">$320</span></p> 
       </div> 
      </div> 
     </div> 

    ) 
} 

}

Answer 1

をちょうどLiと小さい規模でそれを試み、それが働いた何それを行うにしてIVEは考えているが、より複雑なものをレンダリングすることは問題であり、内部関数から何かを返す。

{this.state.products.map(function(product, i) { 
 
    return <div className="order-product" key={i}> 
 

 
     <h3 className="order-product_name">{product.name}</h3> 
 
     <div className="order-product_amount"> 
 

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

 
      </div> 
 
     </div> 
 
     <div className="order-product_price"><span className="l">Price</span><span className="right">${product.price}</span></div> 
 
    </div> 
 
})}

をし、また、あなたは、コメントで述べたように、状態の空のproductsの配列を持っている：あなたはreturnを追加する必要があります。

これにそれを交換してください：あなたが設定しているthis.state = {products: products}