使用反应挂钩将产品组件添加到购物篮

Question

点击任何产品卡片的按钮，都必须将一个组件“AddedProduct”添加到组件“Basket”中。根据选择的产品，组件“AddedProduct”必须从对象数组“productsDataArray”中获取有关产品的正确数据。我试过这样的方法：篮子内容的初始状态是空数组。更改状态必须包含具有正确数据的组件“AddedProduct”。但是我的代码没有添加组件。我只是在研究reactjs，所以我不明白如何正确编写用于将产品添加到购物篮的函数“clickBtn”。请帮帮我。 （这里的代码没有'imports'）：

 export const MainPage = props => {                 {/* parent component with product cards*/} 
     const [basketContent, changeBasketContent] = useState([]);  

     const updateContent = (product) => {
         const addedItems = productsDataArray.filter(item => item.id == 
                 product.id);
              return (
                 <div>                      
                    <AddedProducts productData = {product} />                                
                 </div>                                           
              );                   
         changeBasketContent([addedItems]);         
     };

     const clickBtn = (e) => {     
        updateContent(e.target);
     };  

           return ( 
             <div> 
                <div id = 'productSection'> 
                   {productsDataArray.map(item => {
                     return (
                      <div key = {item.id}>
                         ProductCard productData = {item}
                         clickBtn = {clickBtn}                                        
                       />             
                      </div>  
                       );
                     }                 
                  )}
                </div>
                <Basket/>
           </div> 
        );
     };

 export const ProductCard = props => {     
    const {productData, clickBtn} = props;           
      return (  
          <div id = 'productCard' style = {{width: '300px'}}>
               <img src = {productData.photo} alt = {productData.name} height 
                     = "200" />
               <div>
                  <h6>{productData.name}</h6>
                  <div>    
                     <p>Price: {productData.price}</p>
                     <button type = 'button' onClick = {clickBtn}>                               
                            Add to basket
                     </button>              
                  </div>                   
               </div>
             </div>        
             
           );
  };        
       
export const Basket = props => {        
const {basketContent} = props;    
    
    return (  
        <section id = 'basket-bloc'>       
            <div id = "basket-main">        
                 {basketContent}       
            </div>         
        </section>
      );
}; 

export const AddedProduct = props => {
   const {productData} = props;    
   return (  
     <div id = 'addedProduct'>         
        <div id = 'product-img-small' className = 'basketItem'>
            <img src = {productData.photo} width = '50'
                 alt = {productData.name} />
        </div>
         <div id ='product-name' className = 'basketItem'>
            <p>{productData.name}</p>         
        </div> 
     </div> 
     );
 };                                                  
    
 export const productsDataArray = [
   { 
      id : 1.1, 
      name: "Title1",
      price: "10$",
      photo: img1     
   },
   { 
     id : 1.2,  
     name: "Title2",
     price: "20$",
     photo: img2     
   },
   { 
     id : 1.3,  
     name: "Title3",
     price: "30$",
     photo: img3     
   },
   { 
    id : 1.4,   
    name: "Title4",
    price: "25$",
    photo: img4    
   }          
];                  
            
           
                 

Answer 1

尝试替换

<button type = 'button' onClick = {clickBtn}>
    Add to basket
</button> 

与

<button type='button' onClick={(e) => clickBtn(e)}>
    Add to basket
</button>

我们必须这样做，因为我们只有一个处理多个项目。