使用id React将特定对象推入列表

问题描述

我得到了一个对象列表，这些对象通过.map函数在屏幕上即时显示。 看起来像这样：

组件1：

let itemList = [
        {
            type: "White T-shirt",id: 1,cost: 300,image: whiteTshirt
        },{
            type: "Purple T-shirt",id: 2,cost: 350,image: purpleTshirt
        },{
            type: "Baseballcap",id: 3,cost: 150,image: whiteCap
        },{
            type: "Vice Golfball",id: 4,cost: 40,image: golfball
        },{
            type: "Mousepad",id: 5,cost: 200,image: mousepad
        }
    ];

       let products = itemList.map(items => {

           let item = 
           <div key={items.id}>
                <h2>{items.type}</h2>
                <img className="image"  src={items.image}></img>
                <p className="price">${items.cost}</p>
                <button onClick={onBuy} className="buy-btn">Buy</button>
            </div>
            return item;
        })

       return(
            {shoppingcart ? <Component2 /> : null}
            <main> {products} </main>
)

组件2：

const Comopnent2 = props => {
    const [webshop,setWebshop] = useState(false);

    return(
    <div>
        {webshop ? <Webshop /> : null }
        
<a href="/Webshop" onClick={e => { e.preventDefault(); setWebshop(true)}} >
<p className="to-shop"> Back to shop</p></a>
<h2 className="shopping-header">Your Shopping Cart</h2>

        <div className="cart-container">

            // Here i want to object that i clicked display

        </div>
        )
}

我想要的是将一个特定对象推到我拥有的另一个组件中的另一个数组中。当我单击调用onBuy函数的按钮时，我想这样做。我该如何处理？谢谢。

解决方法

首先在组件1中为购物车项目创建一个钩子。

const [cartItem,setCartItem] = useState();

只要单击按钮并调用onBuy，就设置cartItem：

onBuy (id) {
  let checkoutItem = this.itemList.find(item => item.id === id)
  setCartItem(checkoutItem)
}

在声明调用onBuy函数的按钮时，您将需要传递商品ID。

       let products = itemList.map(items => {

       let item = 
       <div key={items.id}>
            <h2>{items.type}</h2>
            <img className="image"  src={items.image}></img>
            <p className="price">${items.cost}</p>
            <button onClick={onBuy(item.id)} className="buy-btn">Buy</button>
        </div>
        return item;
    })

将此选择传递给组件2。您可以将其作为prop传递给组件1：

return(
        {shoppingcart ? <Component2 item={cartItem} /> : null}
        <main> {products} </main>

在组件2中，您可以相应地显示道具中的数据：

const Comopnent2 = props => {
const [webshop,setWebshop] = useState(false);

return(
<div>
    {webshop ? <Webshop /> : null }
    
    <a href="/Webshop" onClick={e => { e.preventDefault(); setWebshop(true)}} >
    <p className="to-shop"> Back to shop</p></a>
    <h2 className="shopping-header">Your Shopping Cart</h2>

    <div className="cart-container">
        {prop.item.name} //whatever properties your cart item has,I have used name just for example
    </div>
    )
 }