React数组映射内按钮点击致全局数值同步更新的解决求助

问题出在你用了单一的cart状态变量，所有映射生成的菜品数量都绑定到这个变量上，所以点击任何按钮都会修改同一个值，导致所有数值同步变化。要让每个按钮只修改对应菜品的数量，需要把状态改成按菜品ID存储各自的数量。

修改方案： #

1. 初始化按菜品ID存储的状态
   把原来单一的数值状态改成对象，每个菜品ID对应一个数量：

// 初始状态为空对象，或者提前遍历菜品列表初始化所有ID的数量为0
const [cart, setCart] = useState({});

// 可选：提前初始化所有菜品的数量为0（确保初始就能显示0）
// const [cart, setCart] = useState(() => {
//   const initial = {};
//   details.category_dishes.forEach(dish => initial[dish.dish_id] = 0);
//   return initial;
// });

2. 修改增减函数，接收菜品ID参数
   使用函数式更新状态，确保拿到最新的状态值，只修改对应ID的数量：

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

function removeCart(dishId) {
  setCart(prev => ({
    ...prev,
    [dishId]: Math.max((prev[dishId] || 0) - 1, 0)
  }));
}

3. 更新渲染逻辑
   给每个映射元素加唯一key（用菜品ID），点击事件传递当前菜品ID，显示对应ID的数量：

return(
  <div>
    {details.category_dishes.map((item) => (
      <div key={item.dish_id}>
        <ButtonGroup>
          <Button 
            id={item.dish_id} 
            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>
)

这样修改后，每个按钮点击时只会更新对应菜品ID的数量，不会影响其他菜品的数值。

内容的提问来源于stack exchange，提问作者Anagha R