Material ui Loading Button 在 React js 循环中加载所有按钮 onClick（使用地图）

Question

所以，我正在研究 commerce.js API。但是当我按下添加到购物车时，更新购物车商品编号需要一些时间（从 API）所以我认为我应该添加一个加载按钮直到购物车商品加载。我从 @mui/lab 找到了 LoadingButton，所以我使用了它。但问题是即使按下 onClick 时该按钮在循环内，所有其他按钮也进入加载状态。 IDK 我是不是遗漏了什么或者我的编码是错误的？请检查下面并帮助我。谢谢。 :)
这里是主要问题。

这里是app.js，您可以在其中查看加载状态和其他API 正在获取

app.js 中的产品组件。你可以看到我传递了产品和加载道具

产品循环和道具到产品组件

最后是带有加载道具的产品组件中的购物车加载按钮。它可以工作，但所有其他按钮也会同时加载。

Answer 1

您可以做的是创建一个地图，在其中存储每个购物车的加载状态。所以 cartLoading 将具有以下形状：

{
  "product-one-id": true,
  "product-two-id": false,
}

所以把状态改成const [cartLoading, setCartLoading] = useState({});

在 handleAddToCart 处，更改两个 setCartLoading 调用，以便它们仅更新状态的一个键：

setCartLoading(oldState => ({...oldState, [productId]: true}));
...
setCartLoading(oldState => ({...oldState, [productId]: false}));

然后，在 Products 组件内的 <Grid> 处，将 cartLoading={cartLoading} 更改为 cartLoading={cartLoading[product.id] || false}

不过这只是其中一种方法。您还可以处理 Product 组件内的状态。

Answer 2

您使用单个（假设为“全局”）变量来指定加载器状态，这不允许您检查哪一个产品触发了购物车加载。

/* ... */
const [cartLoading, setCartLoading] = useState(false);
/* ... */

首先考虑您是否需要在按钮之外的其他地方更新购物车的信息。如果不是，那么最好的选择是在特定产品的 <Product /> 组件中使用 useState 而不是 <App />.

Material ui Loading Button 在 React js 循环中加载所有按钮 onClick（使用地图）

Material ui Loading Button Loads all button onClick in React js loop (using map)

reactjs

react-hooks

material-ui

commerce

commerce.js