使用useReducer和useContext钩子制作购物车的问题

Question

我正在尝试使用useReducer和useContext钩子制作购物车，但我面临一个问题。当我点击添加按钮时，我希望产品在购物车屏幕中一个接一个地显示，但是当我在购物车中添加产品时，没有显示。我不知道我做错了什么。这是我的主页文件，我列出了产品:

import React, { useEffect, useReducer, useContext } from 'react';
import '../components/components.css';
import axios from 'axios';
import logger from 'use-reducer-logger';
import { Store } from '../Store';

const { state, dispatch: ctxDispatch } = useContext(Store);
const { cart } = state;
const addToCartHandler = () => {
const existItem = cart.cartItems.find((x) => x._id === product.id);
const quantity = existItem ? existItem.quantity + 1 : 1;
ctxDispatch({
type: 'CART_ADD_ITEM',
payload: { ...product, quantity },
});
};

export default Products;

If somebody can give me a tip it would be nice

Answer 1

在我看来，existItem将被改变如下:

const addToCartHandler = (item) => {
const existItem = cart.cartItems.find((x) => x._id === item.id);
const quantity = existItem ? existItem.quantity + 1 : 1;
ctxDispatch({
type: 'CART_ADD_ITEM',
payload: { ...item, quantity },
});
};
...
};

Answer 2

您在要添加到购物车的调度中的逻辑有一些问题，我进行了相应的修改:

const addToCartHandler = (item) => {
const existItem = cart.cartItems.find((x) => x._id === item.id);
const quantity = existItem ? existItem.quantity + 1 : 1;
ctxDispatch({
type: 'CART_ADD_ITEM',
payload: { ...item, quantity },
});
};
return (
<div className="produse">
{products.map((item) => (
<div className="produs" key={item._id}>
<div>
<img className="imagine-produs" src={item.image} alt={item.name} />
</div>
<div>
<h3 className="nume-produs">{item.name} </h3>
</div>
<div className="pret-produs">{item.price} RON</div>
<div>
<button className="adauga-produs" onClick={()=>addToCartHandler(item)}>
Adauga
</button>
</div>
</div>
))}
</div>
);
};

注意，为了能够在本地运行它，我需要删除logger