问React.JS上下文应用编程接口问题(呈现问题)

EN

import './Product.css'
import AddBoxIcon from '@material-ui/icons/AddBox';
import { Context } from "./Context"
import React, {useContext} from "react"




function Product({title,price,image,id}) {

   const {addtoBasket} = useContext(Context)

/*
  function alertUser() {
        alert(`${title} added to your card`)
    }

    function addBasket(){
        console.log(title,price)
    }


    function firedFunctions(){
        alertUser()
        addBasket()
    
    }

*/
    
    return (
        <div className="product">
            <div className="product__info">
                <img src={image} alt=""></img>
                <p className="title">{title}</p>
                <div className ="price__add" >
                    <h4>Price : {price} $</h4>
                    <div onClick={() => addtoBasket(title, price, image,id)}>
                    <AddBoxIcon className="btn" />
                    </div>
                </div>                
            </div>            
        </div>
    )
}

export default Product

import React, {useContext} from 'react'
import './Cart.css'
import {Context} from "./Context"
import Product from "./Product"


function Cart() {

    const {basket} = useContext(Context)
    console.log(basket) // Expected: Empty Array
    return (
        <div className="cart">
            <div className="cart__left">
                <h2>Your Products</h2>
                    <div>
                        {basket.map((product) =>(                          
                            <h4>{product}</h4>
                            {/*why product give me just a title of product*/}
                                                                     
                        ))}
                        
                    </div>

            </div>
            
            <div className="cart__right">
                <h2>Total</h2>
            </div>
        </div>
    )
}

export default Cart