React中点击单个addToBasket按钮仅修改该按钮状态的实现问题

点击某个“addToBasket”按钮时，需仅将该按钮替换为“-”和“+”按钮，但目前所有通过.map渲染的按钮会同时变更状态。技术栈：React、Chakra UI按钮、.map函数。

当前实现代码 #

商品列表渲染部分 #

{products.map((item) =>  {
  return (
    <Box key={item.id} border="1px solid black" h="auto" >
      <Link to={`/product/single-product/${item.id}`}>
        <Box h="auto" border="1px solid black">
          <Box><Image src={item.image} h="fit-content" /></Box>
          <Text h="fit-content" >{item.name}</Text>
          <Text h="fit-content" >Rs.{item.price}</Text>
        </Box>
      </Link>
      <Box align="center" border="1px solid black" h="50px" > 
        { addToBasket && <Button onClick={() => handleAddToBasket(item)} ml="5px" >ADD TO BASKET</Button> }
        { addBtn && <Button ml="5px" onClick={handleReduceItem} >-</Button> }               
        { addBtn && <Button ml="5px" >+</Button> }
      </Box>
    </Box>
  )})}

状态与点击函数部分 #

const [addToBasket, setAddToBasket] = useState(true);
const [addBtn,setAddBtn] = useState(false);

function handleAddToBasket(singleProduct){
  if(addToBasket === true){
    setAddToBasket(false)
    setAddBtn(true);
  }
  dispatch(addToCart(singleProduct))
}

function handleReduceItem(){
  if(addBtn === true){
    setAddToBasket(true)
    setAddBtn(false);
  }
}

问题根源 #

当前使用的是全局布尔值状态addToBasket和addBtn，所有商品共用这一组状态。一旦点击任意商品的按钮，全局状态改变后，所有通过.map渲染的商品都会根据全局状态更新UI，导致所有按钮同时切换。

解决方案 #

将全局状态改为按商品ID跟踪每个商品的独立状态，用对象存储每个商品的按钮状态，这样就能精准控制单个商品的UI变化。

修改后的完整代码示例 #

状态定义

// 用对象存储每个商品的状态，key为商品id，value包含两个状态字段
const [itemStates, setItemStates] = useState({});

点击事件函数

function handleAddToBasket(singleProduct){
  // 仅更新当前点击商品的状态，保留其他商品状态
  setItemStates(prev => ({
    ...prev,
    [singleProduct.id]: {
      showAddToBasket: false,
      showAddBtn: true
    }
  }));
  dispatch(addToCart(singleProduct))
}

function handleReduceItem(itemId){
  // 还原指定商品的按钮状态
  setItemStates(prev => ({
    ...prev,
    [itemId]: {
      showAddToBasket: true,
      showAddBtn: false
    }
  }));
}

商品列表渲染部分

{products.map((item) =>  {
  // 获取当前商品的状态，未设置时用默认值（显示ADD TO BASKET按钮）
  const { showAddToBasket = true, showAddBtn = false } = itemStates[item.id] || {};
  
  return (
    <Box key={item.id} border="1px solid black" h="auto" >
      <Link to={`/product/single-product/${item.id}`}>
        <Box h="auto" border="1px solid black">
          <Box><Image src={item.image} h="fit-content" /></Box>
          <Text h="fit-content" >{item.name}</Text>
          <Text h="fit-content" >Rs.{item.price}</Text>
        </Box>
      </Link>
      <Box align="center" border="1px solid black" h="50px" > 
        { showAddToBasket && <Button onClick={() => handleAddToBasket(item)} ml="5px" >ADD TO BASKET</Button> }
        { showAddBtn && <Button ml="5px" onClick={() => handleReduceItem(item.id)} >-</Button> }               
        { showAddBtn && <Button ml="5px" >+</Button> }
      </Box>
    </Box>
  )})}

说明 #

• 通过商品id作为唯一标识，确保每个商品的状态独立存储、互不干扰。
• 渲染时优先读取对应商品的状态，无状态时使用默认值，保证初始显示正确。
• 点击事件仅修改当前商品的状态，实现精准控制单个按钮的切换。

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