React.JS 上下文 API 问题（渲染问题）

Question

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

上下文.Js; 这是我的 Context.js

Reducer.Js这里是 Reducer.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

当我单击按钮 v.1（控制台）时，这是 output；

我也想查看价格和图片。

Answer 1

您将三个参数传递给addToBasket function，但它只接收一个 object。

您可能需要的是：

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

我刚刚在codesandbox中复制了它，这是正确的答案，看看： https://codesandbox.io/s/awesome-violet-fr7np?file=/src/index.js