Javascript 如何将道具传递给模型

我有一个购物应用程序，我在其中映射一些产品并在屏幕上渲染它们。用户可以增加/减少数量。当数量达到1并且用户点击次数减少时，一些中间件会跳进来询问他们是否确定要将其从篮子中移除。如果他们单击“否”，则会关闭模态并将其留在篮子中。如果他们单击yes，它将关闭modal并将其从篮子中移除

如何将道具传递给modal以确保删除正确的产品

到目前为止，我有这个。所有的功能都在那里，删除功能也在那里。我只是不知道如何将特定产品传递给modal？增量/减量工作的原因是，它们是映射到每个产品的

映射的一部分。显然，当模态加载时，它不是映射的一部分。我曾尝试将其包括在地图中，但显然这会为每个产品呈现一个模式，这是没有用的

<h4> Bag </h4>
<Modal />
{bag.products.map((product, index) => (
  <div key={index}>
    <div>{product.name}</div>
    <div>£{product.price}</div>
    <div>
      <span> Quantity:{product.quantity} </span>
      <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
      <button onClick={() => this.props.decrementQuantity(product)}> - </button>
    </div>
  </div>
))}

包
{bag.products.map（（产品，索引）=>(
{product.name}
英镑{产品价格}
数量：{product.Quantity}
this.props.incrementQuantity（product，product.quantity+=1）}>+
此.props.decrementQuantity（产品）}>-
))}

有什么想法吗？
我最近遇到了类似的情况。我使用redux/global state管理它，因为我必须跟踪许多模态。地方政府的类似做法

//****************************************************************************/

constructor(props) {

    super(props)


    this.state = {
      isModalOpen: false,
      modalProduct: undefined,
    }
}

//****************************************************************************/

render() {

    return (
        <h4> Bag </h4>
        {this.state.isModalOpen & (
          <Modal 
            modalProduct={this.state.modalProduct}
            closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined})
            deleteProduct={ ... }
          />
        )

        {bag.products.map((product, index) => (
        <div key={index}>
            <div>{product.name}</div>
            <div>£{product.price}</div>
            <div>
            <span> Quantity:{product.quantity} </span>
            <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
            <button onClick={() => this.decrementQuantity(product)}> - </button> // <----
            </div>
        </div>
        ))}
    )
}

//****************************************************************************/

decrementQuantity(product) {

    if(product.quantity === 1) {
        this.setState({ isModalOpen: true, modalProduct: product })
    } else {
        this.props.decrementQuantity(product)
    }
}

//****************************************************************************/
建造师（道具）{
超级（道具）
此.state={
伊斯莫达洛彭：错，
modalProduct:未定义，
}
}
//****************************************************************************/
render（）{
返回(
纸袋
{this.state.isModalOpen&(
this.setState（{isModalOpen:false，modalProduct:undefined}）
deleteProduct={…}
/>
)
{bag.products.map（（产品，索引）=>(
{product.name}
英镑{产品价格}
数量：{product.Quantity}
this.props.incrementQuantity（product，product.quantity+=1）}>+
this.decrementQuantity（product）}>-//Linked:Linked：如果您使用的是某种模式脚本，我确信它的repo中有关于如何操作的信息。如果您使用的是自己的，那么您可以使用，然后传递道具就变成了easier@vsync所以本质上它希望我改变一些状态，比如“editableProductId”填充，然后我把它传递回模态？