reactjs React中的数组Map中的按钮

fumotvh3 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(128)

我在Map的数组元素中创建了两个按钮，它们的功能是减少和增加一个值，但是单击一个按钮会增加所有其他按钮的值
下面的代码

const [cart, setCart] = useState(0)
    function addCart() {
        setCart(cart + 1)
    }
    function removeCart() {
        if (cart > 0) {
            setCart(cart - 1)
        }
    }

return(
<div>
{details.category_dishes.map((item) => (
<div>
<ButtonGroup >
    <Button id={item.dish_id} style={{ borderTopLeftRadius: '50%', borderBottomLeftRadius: '50%' }} variant='success' onClick={removeCart}>-</Button>
    <span className='bg-success p-2'>{cart}</span>
    <Button style={{ borderTopRightRadius: '50%', borderBottomRightRadius: '50%' }} variant='success' onClick={addCart}>+</Button>
</ButtonGroup>
</div>
)

</div>
)

我希望只有各自的价值二是改变时，按钮被点击
下面的代码

const [cart, setCart] = useState(0)
    function addCart() {
        setCart(cart + 1)
    }
    function removeCart() {
        if (cart > 0) {
            setCart(cart - 1)
        }
    }

return(
<div>
{details.category_dishes.map((item) => (
<div>
<ButtonGroup >
    <Button id={item.dish_id} style={{ borderTopLeftRadius: '50%', borderBottomLeftRadius: '50%' }} variant='success' onClick={removeCart}>-</Button>
    <span className='bg-success p-2'>{cart}</span>
    <Button style={{ borderTopRightRadius: '50%', borderBottomRightRadius: '50%' }} variant='success' onClick={addCart}>+</Button>
</ButtonGroup>
</div>
)

</div>
)

reactjs

来源：https://stackoverflow.com/questions/76037363/button-inside-array-mapping-in-react

1条答案

按热度按时间

72qzrwbm1#

单击一个按钮会使所有其他按钮的值递增的原因是它们都引用了相同的状态值cart。要解决这个问题，您需要为Map数组中的每个项目创建一个单独的状态值。实现此目的的一种方法是创建一个对象，使用其dish_id作为键来保存每个项目的状态值。以下是如何修改代码来解决这个问题：

const [cart, setCart] = useState({});

function addCart(id) {
  setCart((prevCart) => ({
    ...prevCart,
    [id]: (prevCart[id] || 0) + 1
  }));
}

function removeCart(id) {
  if (cart[id] > 0) {
    setCart((prevCart) => ({
      ...prevCart,
      [id]: prevCart[id] - 1
    }));
  }
}

return (
  <div>
    {details.category_dishes.map((item) => (
      <div key={item.dish_id}>
        <ButtonGroup>
          <Button
            style={{ borderTopLeftRadius: '50%', borderBottomLeftRadius: '50%' }}
            variant='success'
            onClick={() => removeCart(item.dish_id)}
          >
            -
          </Button>
          <span className='bg-success p-2'>
            {cart[item.dish_id] || 0}
          </span>
          <Button
            style={{ borderTopRightRadius: '50%', borderBottomRightRadius: '50%' }}
            variant='success'
            onClick={() => addCart(item.dish_id)}
          >
            +
          </Button>
        </ButtonGroup>
      </div>
    ))}
  </div>
);

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs React中的数组Map中的按钮

1条答案

相关问题

热门标签

最新问答