添加到购物车功能不起作用 - 上下文 API - 反应

Question

我正在关注本教程here 并完全遵循它，我什至浏览过 github repo 并且代码是相同的。但是，当我单击按钮将产品添加到购物车时，状态不会改变。在反应开发工具中，仅状态更改是 showHideCart 从 false 更改为 true - 所以它似乎只识别状态更改？

我希望能够在单击按钮后将我的产品添加到购物篮中 - 任何人都可以看到我哪里出错了吗？控制台中没有错误，并且购物篮数组只是没有改变它甚至没有说未定义，这就是我认为没有产品出现在购物篮中的情况。

这里是代码sandbox的链接

以下是我认为问题所在的代码文件：

CartState.js

import { useReducer } from 'react'
import { CartContext } from './CartContext'
import {CartReducer} from './CartReducer'
import { SHOW_HIDE_CART, ADD_TO_CART, REMOVE_ITEM } from '../Types'

export const CartState = ({children}) => {

    const initialState ={
        showCart: false,
        cartItems: [],

    };

    const [state, dispatch] = useReducer(CartReducer, initialState);

    const addToCart = (item) => {
        dispatch({type: ADD_TO_CART, payload: item})
    };

    const showHideCart = () => {
        dispatch({type: SHOW_HIDE_CART})
    };

    const removeItem = (id) => {
        dispatch({ type: REMOVE_ITEM, payload: id });
    };


    return (
        <CartContext.Provider 
            value={{
                showCart: state.showCart,
                cartItems: state.cartItems,  
                addToCart,
                showHideCart,
                removeItem,
            }}>
            {children}
        </CartContext.Provider>
    )
};

CartReducer.js

import {ADD_TO_CART, REMOVE_ITEM, SHOW_HIDE_CART } from '../Types'

export const CartReducer = (state, action) => {
    switch (action.type) {
        case SHOW_HIDE_CART: {
            return{
                ...state,
                showCart: !state.showCart
            }
        }
        case ADD_TO_CART: {
            return {
                ...state,
                cartItems: [...state.cartItems, action.payload],
            }
        }
        case REMOVE_ITEM: {
            return {
                ...state,
                cartItems: state.cartItems.filter(item => item.id !== action.payload)
            }
        }
        default: 
            return state
    }
}

产品.js

import React, { useContext } from 'react'

import { QuantityButtonDiv } from './QuantityButtonDiv'
import {BasketItem} from './BasketItem'
import { CartContext } from '../context/cart/CartContext'

export const Product = ({product}) => {

    const {addToCart } = useContext(CartContext)
   

    return (
        <div>
            <div className="image-div">
                <img style={{height: "100%", width: "100%"}} src={product.image}/>
            </div>
            <div className="details-div">
                <h1>{product.title}</h1>
                <span>
                    {product.description}
                </span>
                <span className="price">
                    £ {product.price}
                </span>
                <div className="stock-div">
                    {product.stock} in stock
                </div>
                <QuantityButtonDiv/>
                <button onClick={() => addToCart(product)}  className="button">
                    Add To Basket
                </button>
            </div>
        </div>

    )
}

ProductDetailsPAge.js

import React, { useContext } from 'react';
import '../styles/productDetailsPage.scss';
import img from '../assets/image.png'
import { QuantityButtonDiv } from '../components/QuantityButtonDiv';
import { Product } from '../components/Product';

import { CartContext } from '../context/cart/CartContext';




export const ProductDetailsPage = () => {



    const products = [
        {
            id: 1,
            title: "Waxed Cotton Hooded Jacket",
            image: require("../assets/image.png"),
            description: "The Drumming jacket in orange is finished with a water-repellent dry wax treatment that creates a love-worn look. It's made in the United Kingdom using organic cotton ripstop with a drawstring hood, underarm eyelets and buttoned flap front pockets. Shoulder epaulettes add a utilitarian twist, while a fly-fronted zip and snap-button closure keeps the overall look streamlined. Attach one of the collection's padded liners to the internal tab on cooler days.",
            price: 650,
            stock: 10,
        }
    ]

    return (
        <div className="product-details-page">
            {
                products.map((product) => (
                    <Product
                    key={product.id}
                    product={product}
                    // title={product.title}
                    // image={product.image}
                    // description={item.description}
                    // price={item.price}
                    // stock={item.stock}
                    />
                ))
            }
        </div>
    )
}

Answer 1

问题在于 showCart 和 showHideCart - 一旦我摆脱了这些，购物车就可以工作了。

Answer 2

购物篮页面路线目前存在错误

您正在通过 CartContext 传递一个对象：

<CartContext.Provider 
        value={{
            showCart: state.showCart,
            cartItems: state.cartItems,  
            addToCart,
            showHideCart,
            removeItem,
        }}>

在 BasketPage 中，您正在解构一个 数组：

    const [cart, setCart] = useContext(CartContext);//Typeerror here

另外，您没有通过该上下文值对象传递 cart 或 setCart。

你需要先解决这个错误，再看看它是否正常。