如何將數組中的值傳遞給道具

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 (
    // ...
    // ...
    // ...
  );
}