Добавление товара в корзину в reactjs приложении

Question

Я изучаю reactj, создавая самое простое приложение-магазин, используя react hooks, без редакса. Не работает функция добавления товаров в корзину. В родительском компоненте 'MainPage' находятся карточки товаров. При нажатии на кнопку карточки, в компонент 'Basket' должен добавляться компонент 'AddedProduct' с соответствующими данными конкретного товара, взятыми из массива объектов 'productsDataArray'. Ниже привожу компоненты, имеющие отношение к добавлению товаров. Думаю, проблема в функциях 'updateContent' или 'clickBtn'. Помогите решить проблему добавления товаров.

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


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);
 };  

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

Вся проблема заключается в данном участке кода: на событие onClick у элемента button, вы вызываете callback clickBtn, который вызывает функцию updateContent, передавая в качестве значения аргумента product e.target, но только e.target - это кнопка и он не укажет в качестве product магическом образом нужный объект.

В качестве верного варианта, вам нужно передать стрелочную функцию в свойство onClick кнопки, где вы вызовите clickBtn, передав в качестве аргумента product productData. Небольшой совет по именованию в React: функция clickBtn не понятно за что отвечает, а updateContent не понятно, какой контент обновляет, намного лучше будет переименовать clickBtn на handleAddProductToCart или onAddProductToCart, а updateContent в addProductToCart или что-то в этом духе.

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

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 = {() => handleAddProductToCart(productData)}
                 >                               
                        Add to basket
                 </button>              
              </div>                   
           </div>
         </div>       
       );
   };

Я сейчас заметил странность в вашем коде:

 const updateContent = (product) => {
     const addedItems = productsDataArray.filter(item => item.id == product.id);
          return (
             <div>                      
                <AddedProducts productData = {product} />                                
             </div>                                           
          );
     // код после return не будет работать.               
     changeBasketContent(addedItems);         
 };

Я не совсем понимаю, что здесь должно было быть, по этой причине написал простенький пример желаемого вами результата на codesandbox: https://codesandbox.io/s/nostalgic-lovelace-qjknv?fontsize=14&hidenavigation=1&theme=dark&file=/index.js
Очень прошу вас, если вы хотите что-то еще узнать поэтому вопросу, обязательно отвечайте мне, а, если вы бы хотели иметь того, у кого вы могли бы спросить что-либо по React, Webpack, TypeScript, Node.js, то вот вам мой vk: https://vk.com/lucien_glue.
Надеюсь, я был для вас хоть сколько-то полезным.

БЛОГ НА HUSL

Добавление товара в корзину в reactjs приложении

Ответы (1 шт):