尝试在offconvas中添加子按钮，但打开/关闭它们会激活该按钮。并且该按钮本身不工作。
祖项Shop.js

import React, { useState } from 'react'
import ShopAssortment from './ShopAssortment'
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

import './Shop.css'

export default function ShopMenu(props) {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <section>
            <Button onClick={handleShow} className='open-shop-button'>
                <p className='shop-button-text'>Open shop</p>
            </Button>
            <Offcanvas show={show} onHide={handleClose} placement="bottom" className='shop'>
                <Offcanvas.Header closeButton>
                    <Offcanvas.Title><h2>Shop</h2></Offcanvas.Title>
                </Offcanvas.Header>
                <Offcanvas.Body>
                    <ShopAssortment/>
                </Offcanvas.Body>
            </Offcanvas>
        </section>

  )
}

父项ShopAssortment.js

import React from 'react'
import ShopItems from './ShopItems'

export default function ShopAssortment(props) {
    const shopAssortment = [
        {item_id: 1, name: 'Item 1', price: 11, effect: 'some_effect', image: 'somePicture.png', available: true},
        {item_id: 2, name: 'Item 2', price: 123, effect: 'some_effect', image: 'somePicture.png', available: true}
    ]

    const availableAssortment = shopAssortment.filter(dict => dict.available === true)

    const handleUpgradeBuy = (bought_upgrade_id) => {
        shopAssortment.map((dict) => {
            if (dict['item_id'] === bought_upgrade_id) {
                console.log('It gets activated by parent')
                dict['available'] = false
            }
        })

    }

    return (
        <ShopItems 
            shopAssortment = {availableAssortment}
            handleUpgradeBuy = {handleUpgradeBuy}
        />
    )
}

子ShopItems.js（当点击Grandparent(shop)引导程序按钮时，handleUpgradeBuy按钮被激活，打开offconvas）

import React from 'react'

export default function ShopItems(props) {
    return (
        props.shopAssortment.map((item) => {
            return ( 
                <div className='shop-items' key={item.item_id}>
                    <div className='image-bg'>
                        <img src={'./img/' + item.image} className='item-img'></img>
                    </div>
                    <div className='item-description'>
                        <h4>{item.name}</h4>
                        <p>Price: {item.price}$</p>
                        <p>{item.effect}</p>
                    <button onClick={props.handleUpgradeBuy(item.item_id)}>Publicate</button>
                    </div> 
                </div>
                )
            }
        )
    )
}

这就是我点击祖父按钮时得到的结果，它激活了子按钮。同时，子按钮不起作用：
https://i.stack.imgur.com/G5lgb.pnghttps://i.stack.imgur.com/mDP5y.png显示器
也许我不明白一些React/JS。如果是这样的话，你能指出它吗？因为现在我有点卡住了：/
先谢谢你。