javascript - 添加到购物车功能不起作用 - 上下文 API - 反应
问题描述
我在这里遵循本教程并完全遵循它,我什至浏览了 github repo并且代码是相同的。但是,当我单击按钮将产品添加到购物车时,状态不会改变。在反应开发工具中,仅表明更改是 showHideCart 从 false 更改为 true - 所以它似乎只识别状态更改?
单击按钮后,我希望能够将我的产品添加到购物篮中 - 任何人都可以看到我哪里出错了吗?控制台中没有错误,并且购物篮数组只是没有改变它甚至没有说未定义,这就是我认为没有产品出现在购物篮中的情况。
这是代码沙箱的链接
以下是我认为问题所在的代码文件:
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>
)
}
解决方案
问题在于 showCart 和 showHideCart - 一旦我摆脱了这些,购物车就可以工作了。
推荐阅读
- visual-studio-2017 - 没有为包注册 InprocServer32 [Visual C++ 资源编辑器包]
- java - SpringMVC - CORS 过滤不适用于“授权”标头
- javascript - Javascript - 骨架内容占位符
- swift - 一个类如何符合具有协议约束关联类型的协议?
- ruby-on-rails - country_select gem 错误的参数数量错误
- java - 找不到我的元素(硒初学者)
- reactive-programming - 如何找到 Flux(Parent) 中的所有数据都由其内部的非阻塞 Flux 或 Mono(child) 处理?
- r - 如何将股票数据从 xts 对象转换为 ts 对象
- installation - 安装打包时如何管理稳定的二进制文件并避免 CI 重建的风险?
- vba - 来自用户窗体的自动化错误 VBA