0

Изучаю react. Поставила себе задачу реализовать функции, как в интернет магазине: есть карточки товаров при клике на значок "+" они должны складываться в корзину и на главной странице должно отображаться количество товаров и их общая сумма. Написала с помощью хука useState, но видимо что-то делаю не так. Помогите пожалуйста понять, что именно я делаю не так?

App.js


import './App.css';

import Products from './Pages/Products'

import Basket from './Pages/Basket'

import NotFound from './Pages/NotFound'

function App() {
  return (
    <>
    <div className = "products">
       <Products />
    </div>
    <div className = "basket">
      <Basket />
    </div>
    </>
  );
}

export default App;

Products.js

import Card from '../components/elements/card.js';
import { products } from '../products';
import './Products.css'
import React, { useState } from 'react';
//импорт React router DOM
import { Link } from 'react-router-dom';


//Функциональный компанент Products
function Products () {

  //хук для подсчета суммы цен
  const [productsSum, setProductsSum]=useState(0);

  //хук для подсчета количества добавлнных товаров
  const [countsSum, setCountsSum]=useState(0);

  //функция 
  const addProduct = (price) => {
    setProductsSum(productsSum => productsSum + parseInt(price));
    setCountsSum(countsSum => countsSum + 1);
  }

    return (
    <main className = "main">
     <div className = "container">
       <header className = "header">
         <h1>наша продукция</h1>
         <div className = "basketArea">
           <div calssName = "total">
              {countsSum} товара на сумму {productsSum}
              <Link to="./Basket" className = "link"><img src= "/Group 71.png"></img></Link>
           </div>
         </div>
       </header>

       <div className = "menu">
              {products.map(key => {
                     const {url, title, description, price, weight} = key;
                     return(
                            <Card 
                            url={url} 
                            title = {title} 
                            description={description} 
                            price={price} 
                            weight={weight} 
                            handleClick = {addProduct(price)}
                            />
                     )
              })}
       </div>
       
     </div>
    </main>
  );
}

export default Products;

Basket.js

import {products} from '../products';
import './Basket.css'
import CardBasket from '../components/elements/card-basket.js'
import './Products.css'


function Basket () {
    
  return (
    <main className = "main-basket">
     <div className = "container-basket">
       <header className = "header-basket">
         <h1>Корзина с выбранными товарами</h1>
       </header>

       <div className = "menu-basket">
              {products.map(key => {
                     const {url, title, description, price, weight} = key;
                     return(
                            <CardBasket
                            url={url} 
                            title = {title} 
                            description={description} 
                            price={price} 
                            weight={weight} />
                     )
              })}
         
       </div>
       <div className = "line"></div>
       <footer className = "footer-basket">
         <h2 className = "footer-basket__header">Заказ на сумму: {} </h2>
         <button className = "footer-basket__btn">Оформить заказ</button>
       </footer>
     </div>
    </main>
  );
}

export default Basket;

products.js

export const products = [
    {
    url:'/1.png',
    title:'Устрицы по рокфеллеровски', 
    description:'Значимость этих проблем настолько очевидна, что укрепление и развитие структуры ',
    price:'2700',
    weight:'500 г.'
},
{
    url:'/2 701.png',
    title:'Свиные ребрышки на гриле с зеленью', 
    description:'Не следует, однако забывать, что реализация намеченных плановых',
    price:'1600',
    weight:'750 г.'
},
{
    url:'/3.png',
    title:'Креветки по-королевски в лимонном соке', 
    description:'Значимость этих проблем настолько очевидна, что укрепление и развитие структуры обеспечивает широкому кругу',
    price:'1820',
    weight:'7 шт.'
},
{
    url:'/4.png',
    title:'Устрицы по-рокфеллеровски', 
    description:'Значимость этих проблем настолько очевидна, что укрепление и развитие структуры ',
    price:'2700',
    weight:'500 г.'
},
{
    url:'/1.png',
    title:'Устрицы по рокфеллеровски', 
    description:'Значимость этих проблем настолько очевидна, что укрепление и развитие структуры ',
    price:'2700',
    weight:'500 г.'
},
{
    url:'/2 701.png',
    title:'Свиные ребрышки на гриле с зеленью', 
    description:'Не следует, однако забывать, что реализация намеченных плановых',
    price:'1600',
    weight:'750 г.'
},
{
    url:'/3.png',
    title:'Креветки по-королевски в лимонном соке', 
    description:'Значимость этих проблем настолько очевидна, что укрепление и развитие структуры обеспечивает широкому кругу',
    price:'1820',
    weight:'7 шт.'
},
{
    url:'/4.png',
    title:'Устрицы по-рокфеллеровски', 
    description:'Значимость этих проблем настолько очевидна, что укрепление и развитие структуры ',
    price:'2700',
    weight:'500 г.'
}
]

1 ответ 1

1

Думаю ошибка здесь:

 handleClick={addProduct(price)}

Передавая пропс handleClick вы вызываете функцию, а не передаёте
Поэтому в пропс handleClick отправляется undefined, тк функция addProduct ничего не возвращает

Для того чтобы передать функцию, в вашем случае нужно сделать так:

handleClick={() => addProduct(price)}

Так же на счёт компонента Card:

import './card.css'

function Card({ url, title, description, price, weight }) {
  return (
    <div className="card">
      <img className="card__preview" src={url} alt="" />
      <h2 className="card__title">{title}</h2>{' '}
      <p className="card__description">{description}</p>
      <div className="card__price">
        {price} Р/ {weight}
        <button className="card__card-add-btn"> +</button>
      </div>
    </div>
  )
}

export default Card

Вы нигде не "вешаете" функцию которая по идее должна приходить у вас из пропсов

1 - Достаньте её из пропсов:

function Card({ url, title, description, price, weight, handleClick }) {

2 - Повесьте на кнопку:

<button className="card__card-add-btn" onClick={handleClick}> +</button>
7
  • большое спасибо! поправила. но функция не заработала к сожалению(
    – Kolamik
    10 сен 2022 в 18:26
  • а что именно не так как нужно? не изменяется значение на самой странице? Покажите код компонента Card
    – HaZcker
    10 сен 2022 в 18:28
  • Да, нажимаю на кнопку "+" и по идее счетчик должен сработать, но ничего не происходит.
    – Kolamik
    10 сен 2022 в 18:53
  • import './card.css'; function Card({url, title, description, price, weight}) { return ( <div className = "card"> <img className = "card__preview" src={url} alt = "" /> <h2 className = "card__title">{title}</h2> <p className = "card__description">{description}</p> <div className = "card__price"> {price} Р/ {weight} <button className = "card__card-add-btn"> + </button> </div> </div> ); } export default Card;
    – Kolamik
    10 сен 2022 в 18:54
  • Лучше обновите вопрос, добавив код )
    – HaZcker
    10 сен 2022 в 18:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.