將多個商品添加到購物車

Question

在一個小型服裝網站上工作，我在連接購物車時遇到了一個問題。

現在，我設法添加了一個“添加到購物車”按鈕，它將所需的信息發送到購物車本身。 但是目前您只能發送一種產品，並且它只顯示一種產品。

在使用網站的另一個功能時，我遇到了類似的問題，但只需創建一個新的 object 並使用擴展運算符即可解決。 我也嘗試對購物車執行此操作，但沒有任何工作。

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

你需要堅持舊的 state，試試這個：

首先，您需要將 cartItems 默認值設置為空數組：

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

然后在使用 setCartItems 時堅持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。