我应该如何为电子商务网站的结帐页面创建逻辑？

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 相同，以便您可以正确查找和匹配项目。