我應該如何為電子商務網站的結帳頁面創建邏輯？

Question

我正在使用 React 並構建一個簡單的電子商務項目。 在商店頁面上，當我單擊產品的“+”按鈕時，該產品將添加到結帳項目中。 問題是，如果您添加多個相同的產品，它會將其添加為另一項。 我想做的是，如果產品的數量大於 1，則只顯示 1 件商品並顯示數量。

我使用 useContext 將所有數據共享到購物和結帳頁面。 我在該上下文中創建了 addItem function 和所有狀態。(ShopContext)

商店環境

 const [products, setProducts] = useState([]);
 const [checkoutItems, setCheckoutItems] = useState([]);

const addItem = (id) => {
    const newProduct = id;
    setCheckoutItems([...checkoutItems, products[newProduct]]);
  };

 const values = {
    products,
    addItem,
    checkoutItems,
  };
  return (
    <ShopContext.Provider value={values}>{props.children}</ShopContext.Provider>
  );

按鈕：

<button
              id={idx}
              className="bg-purple-400 px-4"
              onClick={(e) => addItem(e.target.id)}>+</button>

結帳頁面

const Checkout = () => {
  const { checkoutItems } = useContext(ShopContext);
  return (
    <div className="my-7 lg:max-w-7xl mx-auto font-Rubik items-center">
      {JSON.stringify(checkoutItems)}
    </div>
  );
};

Answer 1

您的 checkoutItems 應該是一個對象數組，其屬性如下

[ { id: 'abc', quantity: 2 }, { id: 'cde', quantity: 1 ] 

在后端，您應該根據 ID 檢索產品的價格並將其顯示給用戶。 您的前端不需要更多信息（例如價格等），因為所有這些都應該由后端處理。 您也不希望在您的服務器上有任何端點，這將允許前端發送價格等信息。

Answer 2

解決此問題的一種方法是在 checkoutItems state 中跟蹤每個項目的數量。您可以通過為每個項目創建一個 object 來實現這一點，其中包括產品信息和數量屬性。

在 addItem function 中，您可以檢查該項目是否已存在於 checkoutItems state 中。如果存在，您可以增加 quantity 屬性。 如果沒有，您可以在 state 中添加一個新的 object，其中包含產品信息和數量 1。

以下是如何更新代碼的示例：

商店環境

const addItem = (id) => {
const newProduct = products[id];
const existingItem = 
checkoutItems.find(item => item.id === id);
if(existingItem){
setCheckoutItems(checkoutItems.map(item => item.id === id ? {...item, quantity: item.quantity+1} : item));
} else {
setCheckoutItems([...checkoutItems, {...newProduct, quantity: 1}]);
}
};

結賬頁面

const Checkout = () => {
const { checkoutItems } = 
useContext(ShopContext);
return (
<div className="my-7 lg:max-w-7xl mx-auto font-Rubik items-center">
{checkoutItems.map(item => <div> 
{item.name} - Quantity: {item.quantity} 
</div>)}
</div>
);
};

然后，您可以使用數量屬性在結帳頁面上顯示正確的數量。

為代碼道歉，我在我的手機上

Answer 3

您當前代碼的問題是，每次單擊“+”按鈕時，您都會向 checkoutItems state 添加一個新的 object，而不是更新現有項目的數量。 要解決此問題，您需要檢查該項目是否已存在於 checkoutItems state 中，如果存在，則應更新該項目的數量屬性。

為此，您可以使用 Array.prototype.find() 方法在 checkoutItems state 中查找現有項目，然后使用 Array.prototype.map() 方法更新該項目的數量屬性。

關於newProduct = products[id]，它是用來通過id從products state中獲取product object，這樣就可以把它添加到checkoutItems state中了。

此外，您在 Checkout 組件的 checkoutItems 上使用 JSON.stringify，它不會顯示項目的名稱和數量。 您應該使用 map 來迭代並顯示項目的名稱和數量。

Answer 4

find() 方法返回未定義的原因是因為它無法在 checkoutItems state 中找到匹配項。這可能是因為產品 state 和 checkoutItems state 中的產品 ID 不相同。

使用像 checkoutItems[0].id === id 這樣的數組索引器只會檢查 checkoutItems state 中的第一項，而不會檢查其他項目。

您可以使用 Array.prototype.filter() 方法遍歷 checkoutItems state，並通過其 id 檢查 state 中的項目是否存在。

以下是如何更新代碼的示例：

const addItem = (id) => {
const newProduct = products.find(product => product.id === id);
const existingItem = checkoutItems.filter(item => item.id === id);
if (existingItem.length > 0) {
setCheckoutItems(
  checkoutItems.map(item =>
    item.id === id ? { ...item, quantity: item.quantity + 1 } : item
  )
);
 } else {
setCheckoutItems([...checkoutItems, { ...newProduct, quantity: 1 }]);
}
};

在這里，我使用 Array.prototype.filter() 方法來過濾 checkoutItems state 並檢查具有給定 id 的項目是否已經存在於 state 中。如果存在，那么我將使用 Array.prototype 更新數量屬性。地圖（）方法。 如果沒有，那么我將新產品添加到 state，數量為 1。

另外，請確保產品 state 和 checkoutItems state 中的產品 id 相同，以便您可以正確查找和匹配項目。