我正在学习反应。我给自己设定了实现功能的任务，就像在网上商店一样：当你点击“+”图标时，会有产品卡片，它们应该被添加到购物篮中，商品数量和总金额应该显示在主页。我使用 useState 钩子编写了它，但显然我做错了什么。请帮助我了解我到底做错了什么？
应用程序.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;
篮子.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;
产品.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 г.'
}
]
