时间戳

首页 > 解决方案 > 我如何将 API 调用从至尊函数发送到另一个名为 product 的组件，以更改名为 cart: true 并显示在购物车中的模拟数据

reactjs - 我如何将 API 调用从至尊函数发送到另一个名为 product 的组件，以更改名为 cart: true 并显示在购物车中的模拟数据

问题描述

function Supreme(){

    return (
      <div>
        <Meniu />
        <Informatii />
        <h1 className="title">Supreme</h1>
        <Product myObj={supremeData}/>
        <div className="numar">
          <p >{supremeData.length} Products</p>
        </div>
        <Footer />
      </div>
    )
}

function Product (props) {
    
    const Lista = [...props.myObj]
    return (
        <div className="product-list">
                        {Lista.map((produse)=>{
                            return(
                                <div className="produse" key={produse.id}>
                                <img src={produse.image} />
                                <h1>{produse.name}</h1>
                                <h2>{produse.price}</h2>
                                <button className="button-product">ADD TO CART</button>
                                </div>              
                            )

                        })}
                     
        </div>
    )
}

如何将 API 调用从至尊函数发送到另一个名为 product 的组件以更改名为 cart: true 的模拟数据并将其显示在购物车中？

标签： reactjs

解决方案

1- 在至尊组件中定义处理 api 调用的方法。2- 将它传递给 Product 组件，就像你为“myObj”道具所做的一样。3- 当产品组件中发生所需事件时调用定义的方法。（例如：componentDidMount 或 onclcik）

function Supreme(){
  cosnt [card , setCard]=useState({})
  const method = (p)=>{
  axious.post(p).then(res=> setCard(res)}}
return (
 <div>
<Meniu />
<Informatii />
<h1 className="title">Supreme</h1>
<Product myObj={supremeData} apiCall={method}/>
<div className="numar">
  <p >{supremeData.length} Products</p>
</div>
<Footer /></div>);}

和产品组件

 function Product (props) {
  const Lista = [...props.myObj]
  return (
   <div className="product-list">
    {Lista.map((produse)=>{
   return(
    <div className="produse" key={produse.id}>
    <img src={produse.image} />
    <h1>{produse.name}</h1>
    <h2>{produse.price}</h2>
    <button onclick={()=>props.apiCall()}
        className="button-product">ADD TO CART</button>
        </div>
         )

              })}
               </div>
                      )
                         }

推荐阅读