Javascript React.JS上下文API问题（呈现问题）

我目前正在尝试实施一个电子商务项目。我的问题是关于上下文API和Reducer。 无法呈现产品的价格和其他详细信息。车内组件

Context.Js；

减速机

我的产品组件代码是

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

import./Product.css'
从“@material ui/icons/AddBox”导入AddBox图标；
从“/Context”导入{Context}
从“React”导入React，{useContext}
功能产品（{标题、价格、图像、id}）{
const{addtoBasket}=useContext（上下文）
/*
函数alertUser（）{
警报（`${title}已添加到您的卡`）
}
函数addBasket（）{
console.log（标题、价格）
}
函数firedFunctions（）{
alertUser（）
addBasket（）
}
*/
返回(
{title}
价格：{Price}$
addtoBasket（标题、价格、图片、id）}>

您正在将三个参数传递给
addToBasket
函数，但它只接收一个对象

可能您需要的是：

<div onClick={() => addtoBasket({title, price, image, id)}>

addtoBasket（{标题、价格、图像、id）}>

我刚刚在codesandbox中复制了它，这是正确的答案，请看：
Offtopic-您粘贴的图像中的字体名称是什么？运营商Mono..不，不是为了这个。谢谢你。这里的工作很有魅力，刚刚编辑了应答控制台，我可以看到如下输出：0:{title:“Iphone XS Max”，价格：3000，图像：“，id:2}但它没有呈现我犯了一个错误，比如：未捕获错误：对象作为React子对象无效（找到：具有键{title，price，image，id}的对象）。如果要呈现子对象集合，请改用数组。您不能仅使用
{product}
像以前一样，看看我创建的沙盒，我看到了……非常感谢，谢谢您抽出时间：）