将多个商品添加到购物车

Question

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

现在，我设法添加了一个“添加到购物车”按钮，它将所需的信息发送到购物车本身。但是目前您只能发送一种产品，并且它只显示一种产品。

我在使用该网站的另一个功能时遇到了类似的问题，但只需创建一个新对象并使用扩展运算符即可解决。我也尝试对购物车执行此操作，但没有任何效果。

我不能 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>

这不能解决产品重复问题，但可以在购物车级别解决，方法是在呈现之前减少您的 cartItems。