使用 React 和 Debouncing 管理购物车更新

Question

我目前正在使用 React 开发电子商务应用程序，当用户添加或减少购物车中的商品数量时，我在管理购物车更新时遇到问题。

目前，每次用户单击某个项目的“添加”或“减去”按钮时，我都会向服务器发送更新请求。这会导致大量服务器请求，并对应用程序造成压力。

我想实现去抖动，以便仅在用户完成添加或减去购物车中的商品后才将更新发送到服务器。

以下是我尝试过的几个步骤：

我创建了一个名为“changes”的状态变量来跟踪用户所做的更改。

我使用了 debounce 函数来延迟对购物车更新函数的调用。

但是，我目前正在努力将“changes”变量中的现有更改合并到用户完成后发送到服务器的单个更新中。

我应该如何进行这个去抖实施？我是否遗漏了任何步骤或犯了错误？

感谢您的协助！

这是我的代码

const handleChangeQty = async (item, type, index) => {

let qty = item.quantity + 1;
if (type == "dec") {
  qty = item.quantity - 1;
}
let localListCart = newListCart;
if (qty > 0) {
  localListCart.data[index].quantity = qty;
  localListCart.data[index].total_price =
    localListCart.data[index].price * localListCart.data[index].quantity;
} else {
  let newData = localListCart.data.filter((its) => its.code != item.code);
  localListCart.data = newData;
}

let newTotal = 0;
localListCart.data.forEach((element) => {
  newTotal += element.total_price;
});
localListCart.total = newTotal;

setNewListCart({ ...newListCart, localListCart });

const payload = {
  code: item.code,
  quantity: qty,
};

debouncedUpdateCart(payload);

};

const debouncedUpdateCart = debounce(async (payload) => {
if (authenticated) {
  await updateCart(payload).then((res) => {
    dispatch(getCartCount());
    dispatch(getCart(false));
  });
} else {
  await updateCartLocal(payload);
  await dispatch(getCartNotMember(false));
}
}, 1000);

顺便说一句，我使用 lodash 来消除抖动。

Answer 1

您实施的最佳方法是以不同的方式处理计数和添加购物车功能。只需将本地计数存储在状态变量中，一旦用户单击“添加到购物车”，即可使用相关负载进行 api 调用。即使有去抖，每次加法或减法调用 api 仍然会产生影响。