Javascript 如何禁用'；添加'；项目按钮，一旦用户已将项目添加到列表中？

我有一个数组中的项目列表。我在该数组中循环，它用

add

和

remove

按钮动态显示项目列表

添加

和

删除

按钮对用户列表中的项目执行添加或删除操作

现在我正在尝试，如果用户在购物车或列表中添加了一次该项目，那么按钮将被禁用。因此，它不会在他的列表或购物车中一次又一次地添加相同的项目

我有什么办法可以做到这一点吗

<div>
    {list.map((shoe) => (
        <div key={shoe.id}>
            <h5>{shoe.name}</h5>
            <button onClick={() => addItem(shoe)}>add</button>
            <button onClick={() => removeItem(shoe.id)}>remove</button>
        </div>
    )}
</div>

{list.map（（鞋）=>(
{shoe.name}
添加项（鞋）}>添加
removeItem（shoe.id）}>remove
)}

这取决于如何将鞋添加到购物车中，但如果仅添加ID，则可以执行以下操作：

---

..

只需添加一个类来隐藏它：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const onButtonClick = (e) => {
    e.target.classList.add('hidden');
  }

  return (
    <div>
      <button onClick={e => onButtonClick(e)}>Click me</button>
    </div>
  );
};

render(<App />, document.getElementById("root"));

---

这里是存储已添加的

id

的映射，如果映射中存在

shoe.id

，则查找并设置按钮的

禁用属性。更新添加和删除项目处理程序以同时更新添加的id状态

const [added, setAdded] = useState({});

...

const addItem(shoe) => {
  ...
  setAdded(added => ({ ...added, [shoe.id]: shoe.id }));
  ...
};

...

const removeItem(id) => {
  ...
  setAdded(added => {
    const nextAdded = { ...added };
    delete nextAdded[id];
    return nextAdded;
  });
  ...
};

...

<div>
  {list.map((shoe) => (
    <div key={shoe.id}>
      <h5>{shoe.name}</h5>
      <button
        disabled={added[shoe.id]}
        onClick={() => addItem(shoe)}
      >
        add
      </button>
      <button onClick={() => removeItem(shoe.id)}>remove</button>
    </div>
</div>

const[added，setAdded]=useState（{}）；
...
常数附加项（鞋）=>{
...
setAdded（added=>（{…added[shoe.id]：shoe.id}））；
...
};
...
const removietem（id）=>{
...
setAdded（added=>{
const nextaded={…added}；
删除下一个标记的[id]；
返回下一站；
});
...
};
...
{list.map（（鞋）=>(
{shoe.name}
附加项（鞋）}
>
添加
removeItem（shoe.id）}>remove
我认为最好的方法是检查您的购物车中是否已经存在鞋子，然后相应地将disabled属性设置为true

您可以使用的另一种方法是在shoe对象中设置一个disabled属性，并在addItem函数中设置该属性，无论何时将shoe添加到购物车。如果空间不是问题，这也很好

<button disabled={shoe.disabled} onClick={() => addItem(shoe)}>add</button>

addItem（鞋）}>add
通过单击按钮，我将整个项目发送到我的reducer函数，该函数将项目添加到购物车中。好的，然后您可以像这样执行：
cartItem.id==shoe.id）}>…
<button disabled={shoe.disabled} onClick={() => addItem(shoe)}>add</button>