Question

我无法将产品数组渲染到我的页面而且没有真正显示。我不知道该如何处理它并且我已经在较小规模上尝试了它只是li并且它起作用，但渲染更复杂的东西对我来说是个问题

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

这是因为你没有从内部功能返回任何东西。您应该添加return：

{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数组，如评论中所述。

将其替换为：this.state = {products: products}

React渲染对象数组

1 个答案: