如何将数组中的值传递给道具

Question

所以我试图从这个数组中传递价值价格

const [products, setProducts] = useState(
    [{
      name: "14K bracelet",
      id: "1",
      description: "Beautfull 14K gold Bracelet",
      price: 100.00,
      img: braceletImg,
    }]
  )

到这里

<h1 className="price">{products.price}</h1>{/*this is a prop*/}

我在购物车中调用道具

function Cart({ products })

购物车组件的完整代码

function Cart({ products }) {
  return(
    <div className="Body">
            {/* {products.map(pr => <h1 className="price">{pr.price}</h1>)} */}
        <div className="Cart-wrapper" >
        <div className="cart-header">
            <h5 className="Product-name cart-text">Product</h5>
            <h5 className="quantity-name cart-text">Quantity</h5>
            <h5 className="price-name cart-text">Price</h5>
            <Button className="btn btn-plus">+</Button>
            <Button className="btn btn-minus">-</Button>
            <div className="card-cart">
                <img className="braceletimg" src={braceletImg} />
                <h1 className="card-body-title">Bracelet title</h1>
                <h1 className="card-body-title seemore"><Link className="Link" to="/Bracelets">Learn More</Link></h1>
                <hr className="cart-hr"></hr>
            </div>
            <div className="div-price">
            {products.map(pr => <h1 key={pr.id} className="price">{pr.price}</h1>)}
            <small className="shippingprice">$5.00 + shipping</small>            
            </div>
                <Button className="btn btn-cart  btn-primary"><Link className="Link" to="/Cart/shipping-buynow">Review Cart</Link></Button>
            </div>
        </div>
    </div>
  )
}

export default Cart;

希望这可以为您提供更好的组件上下文

Answer 1

因为products是一个数组，所以您要么需要使用索引，要么可以使用.map()处理它们。

使用索引：

<h1 className="price">{products[0].price}</h1>

使用.map() ：

{products.map(pr => <h1 key={pr.id} className="price">{pr.price}</h1>)}

需要添加key={...}以便 React 可以优化渲染。 如果你不添加它，那么 React 将在控制台 output 中显示警告。 如果项目已经有唯一的 id 或键值，那么最好使用它。

更新：

您的Cart组件可能在products初始化之前就已经被激活，这可以解释undefined的错误。

这是很正常的，为了防止它成为问题，您可以检查products是否为空：

function Cart({ products }) {
  if (!products)
      return "Loading...";

  return (
    // ...
    // ...
    // ...
  );
}