Reactjs “添加到购物车”按钮应与“数量”按钮映射我应如何映射？ 导入“/Products.css”； 从“反应引导/卡”导入卡； //从“/SingleProduct”导入SingleProduct； 从“React”导入React； //从“react router dom”导入{withRouter}； 从“./Counter”导入计数器 康斯特产品=（道具）=>{ console.log（props.productList，“数据”）； 让{ productList={} }=道具； 让{ 形象,， 标题 名称 价格， 折扣价 }=产品列表； 报税表（< div className=“应用程序”> < 卡片className=“border border-0 border深色px-2”> < 卡片.Img variant=“顶部” src={ 形象 } /> < 卡片.正文> < p className=“title mb-2”>{ 标题 }< p className=“text mb-2”>{ 名称 }< p className=“text”>{ 价格 }{ 折扣价 }< col md=“6”> < /col>< 按钮类型=“按钮” class=“购物车按钮btn轮廓暗” //onClick={（）=>{ //callsingleproduct（）； // }} > 添加到购物车 < /按钮>< 计数器/> { /* 添加到购物车 */ }{/*onClick={（）=>productAdd（productList）}*/}< /卡片正文>{/*{productList.length}数据*/}{/*onClick={（）=>productAdd（productList）}*/}< /div> ); }; //使用路由器导出默认值（产品）； 导出默认产品

我用简单的卡片创建了一个简单的在线电子商务网站。>问题我无法映射数量按钮并将其添加到购物车>按钮，相应的项目应使用>数量添加到购物车。我应该怎么做，一个新手应该如何反应js

在共享代码段中，您在哪里将数组映射到JSX？您是否包含所有相关代码？

    import "./Products.css";
    import Card from "react-bootstrap/Card";
    // import SingleProduct from "./SingleProduct";
    import React from "react";
    // import { withRouter } from "react-router-dom";
    import Counter from './Counter'


    const Products = (props) => {
      console.log(props.productList, "data");
      let {
        productList = {}
      } = props;
      let {
        image,
        title,
        name,
        price,
        discountprice
      } = productList;


      return ( <
        div className = "App" >
        <
        Card className = "border border-0 border-dark px-2" >
        <
        Card.Img variant = "top"
        src = {
          image
        }
        /> <
        Card.Body >
        <
        p className = "title mb-2" > {
          title
        } < /p> <
        p className = "text mb-2" > {
          name
        } < /p> <
        p className = "text " > {
          price
        } < s className = "strike" > {
          discountprice
        } < /s> < /
        p > <
        col md = "6" >

        <
        /col> <
        button type = "button"
        class = "cart-button btn-outline-dark"
        // onClick={() => {
        //   callsingleproduct();
        // }}
        >
        Add to Cart

        <
        /button> <
        Counter / >

        {
          /* <Router>
                        
                      <Link to="/SingleProduct"><button type="button" class="cart-button btn-outline-dark" >Add to Cart</button></Link> 
                       <Switch>
                              <Route exact path='/SingleProduct'  component={SingleProduct} />
                          
                          </Switch> 
                      </Router> */
        } { /* onClick={()=>productAdd(productList)} */ } <
        /Card.Body> < /
        Card > { /* <p style={{color:"green"}}>{productList.length}data</p> */ } { /* onClick={()=>productAdd(productList)} */ } <
        /div>
      );
    };
    // export default withRouter(Products);
    export default Products