我如何从产品评论页面调用添加到购物车按钮

Question

如何从 ProductDetails.js 页面调用 handleAddToCart 函数

我想添加到购物车按钮就像产品页面添加到购物车按钮一样。我尝试了很多方法，比如在 productDetails.js 中使用 handleAddToCart={product} 但它没有用。

Product.js

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faShoppingCart } from '@fortawesome/free-solid-svg-icons'
import './Product.css';
import { Link } from 'react-router-dom';

const Product = (props) => {
    // console.log(props);
    const { img, name, seller, price, stock, key } = props.product;
    return (
        <div className="product">
            <div>
                <img src={img} alt="" />
            </div>
            <div>
                <h4 className="product-name"><Link to={"/product/"+key}>{name}</Link></h4>
                <br />
                <p><small>by: {seller}</small></p>
                <p>${price}</p>
                <p><small>Only {stock} left in stock - Order soon</small></p>
             <button 
                    className="main-button" 
                    onClick={() => props.handleAddProduct(props.product)}
                    > 
                        <FontAwesomeIcon icon={faShoppingCart} /> add to cart
                    </button>
            </div>

        </div>
    );
};

export default Product;

ProductDetails.js

import React from 'react'; 
import { useParams } from 'react-router-dom'; 
import fakeData from '../../fakeData'; 
import Product from '../Product/Product';

const ProductDetail = () => { const {productKey} = useParams(); const product = fakeData.find(pd => pd.key === productKey);
return (
    <div>
        <h1>Your Product Details.</h1>
        <Product handleAddProduct={product} product={product}></Product>
    </div>
);
};

export default ProductDetail;

Shop.js

import React, { useEffect } from 'react';
import fakeData from '../../fakeData'; 
import { useState } from 'react'; 
import './Shop.css'; 
import Product from '../Product/Product'; 
import Cart from '../Cart/Cart'; 
import { addToDatabaseCart, getDatabaseCart } from '../../utilities/databaseManager'; 
import { Link } from 'react-router-dom';

const Shop = () => { const first10 = fakeData.slice(0,10); const [products, setProducts] = useState(first10); const [cart, setCart] = useState([]);
useEffect(()=>{
    const savedCart = getDatabaseCart();
    const productKeys = Object.keys(savedCart);
    const previousCart = productKeys.map( existingKey => {
        const product = fakeData.find( pd => pd.key === existingKey);
        product.quantity = savedCart[existingKey];
        return product;
    } )
    setCart(previousCart);
}, [])

const handleAddProduct = (product) =>{
    const toBeAddedKey = product.key;
    const sameProduct = cart.find(pd => pd.key === toBeAddedKey);
    let count = 1;
    let newCart;
    if(sameProduct){
        count = sameProduct.quantity + 1;
        sameProduct.quantity = count;
        const others = cart.filter(pd => pd.key !== toBeAddedKey);
        newCart = [...others, sameProduct];
    }
    else{
        product.quantity = 1;
        newCart = [...cart, product];
    }
    setCart(newCart);
    addToDatabaseCart(product.key, count);
}

return (
    <div className="shop-container">
        <div className="product-container">
            {
                products.map(pd => <Product 
                    key={pd.key}
                    showAddToCart={true}
                    handleAddProduct = {handleAddProduct}
                    product={pd}
                    ></Product>)
            }
        </div>
        <div className="cart-container">
           <Cart cart={cart}>
                <Link to="/review">
                    <button className="main-button">Review Order</button>
                </Link>
           </Cart>
        </div>
        
    </div>
);
};

export default Shop;

我想从产品 details.js 添加到购物车按钮工作，但它不能

我尝试了很多方法来调用 handleAddToCart 按钮，但它没有用