javascript - react 渲染对象数组

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}