向购物车添加多个商品

Question

在一个小型服装网站上工作时，我在连接购物车时遇到了一个问题。

现在，我设法添加了一个"；添加到购物车"；按钮，用于将所需信息发送到购物车本身。但目前你只能发送一个产品，而且它只显示一个产品。

我在使用网站的另一个功能时也遇到了类似的问题，但只需创建一个新对象并使用spread操作符就解决了。我也试着对推车这样做，但没有得到任何效果。

我不能100%确定如何将多个项目添加到购物车中。

OBS：另一个问题。即使我刷新了页面，这些项目仍然应该在购物车中，LocalStorage是实现这一点的好方法吗？

这是购物车代码：

const Cart = (props) => {
const [isRemoved, setIsRemoved] = useState(false);
let history = useHistory();
const returnHome = () => history.push("/");
const { cartItems } = useContext(AddToCartContext); 
return (
<StyledApp className={classes.container}>
<div className={classes.top}>
<div className={classes.location}>
<span>home / shopping cart</span>
</div>
<div className={classes.title}>
<h1>shopping cart</h1>
</div>
</div>
<div className={classes.content}>
<div className={classes.grid_container}>
<Fragment>
{cartItems === null ? (
<p>Cart is empty</p>
) : (
<Fragment>
<Product
img={cartItems?.img}
name={cartItems?.name}
price={cartItems?.price}
color={cartItems?.color}
id={cartItems?.id}
/>
<Line></Line>
</Fragment>
)}
</Fragment>
</div>
</div>
<div className={classes.bottom}>
<div className={classes.options}>
<OptionsBox>
<LeftArrow />
<span onClick={returnHome} className={classes.options_text}>
continue shopping
</span>
</OptionsBox>
<OptionsBox>
<span className={classes.options_text}>clear shopping cart</span>
<Trash />
</OptionsBox>
</div>
</div>
<footer className={classes.cart_footer}>
<CartFooter />
</footer>
</StyledApp>
);
};

这是添加项目时的代码(缩写(：

import { AddToCartContext } from "../../Contexts/AddToCartContext";
const ProductContent = (props) => {
const { setCartItems } = useContext(AddToCartContext);
return (
<button
type="button"
onClick={() =>
setCartItems({
name: props.name,
price: props.price,
color: props.mainImg?.colour,
img: props.mainImg?.url,
id: params.productid,
})
}
className={classes.add_to_cart}
>
<Cart />
add to cart
</button>
);
}

编辑

按要求：

AddToCartContext.js代码：

import React from "react";
const AddToCartContext = React.createContext(null);
export default AddToCartContext;

App.js代码：

function App() {
const [cartItems, setCartItems] = useState({});
return (
<AddToCartContext.Provider value={{ cartItems, setCartItems }}>
<ThemeProvider theme={themeMode}>
{/* GlobalStyles skapas i ./themes.js */}
<GlobalStyles />
<Router>
<Route exact path="/cart">
<ShoppingCart theme={theme} toggleTheme={toggleTheme} />
</Route>
<Route exact path="/category/:type/:id/:productid">
<FetchAPI />
</Route>
//....
</Router>
</ThemeProvider>
</AddToCartContext.Provider>
);
}

Answer 1

您需要保持旧状态，请尝试以下操作：

首先，您需要将cartItems默认值设置为空数组：

const [cartItems, setCartItems] = useState([]);

然后在使用setCartItems:时保持状态

setCartItems(
(cartItems) => [
...cartItems,
{
name: props.name,
price: props.price,
color: props.mainImg?.colour,
img: props.mainImg?.url,
id: params.productid,
}
]
)

最后，当carItems不为null时，您只渲染一个项目，您必须更改它来迭代cartItems：

<Fragment>
{cartItems.length === 0 ? (
<p>Cart is empty</p>
) : cartItems.map((item) => (
<Fragment>
<Product
img={item?.img}
name={item?.name}
price={item?.price}
color={item?.color}
id={item?.id}
/>
<Line></Line>
</Fragment>
))}
</Fragment>

这不会解决产品重复问题，但可以在Cart级别解决，方法是在渲染前减少cartItems。