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

Question

借助 .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 函数的按钮时，我想这样做。我该如何管理？谢谢。

Answer 1

首先为组件 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。您可以将其作为组件 1 中的道具传递：

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

在组件 2 中可以相应地从 props 中显示数据：

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>
    )
 }