React中Map循环内实现单卡片独立切换Tab的问题

你的问题核心是所有卡片共享了同一个activeTab状态，导致点击任意卡片都会修改全局状态，所有卡片同步切换Tab。要实现单个卡片独立切换，需要给每个卡片单独维护激活状态，具体实现如下：

解决方案思路 #

• 用对象类型的状态存储每个卡片对应的激活Tab（键为卡片的唯一标识，值为Tab ID）
• 点击事件只更新当前卡片对应的状态值
• 每个卡片渲染时读取自身对应的激活状态，而非全局状态

修改后的代码 #

const MyComp = () => {
  // 改为对象存储每个卡片的激活Tab，初始为空，默认使用'1'
  const [activeTabs, setActiveTabs] = useState({})
  const [data, setData] = useState(null)

  const handleTab = (e, currentTab, cardKey) => {
    // 仅更新当前卡片的Tab状态，保留其他卡片的状态
    setActiveTabs(prevState => ({
      ...prevState,
      [cardKey]: currentTab === '1' ? '2' : '1'
    }))
  }

  return(
    <div>
      {data !== null ?
        data.map( (v, index) => {
          // 优先用数据的唯一ID作为标识（如果有），没有则用索引
          const cardKey = v.id || index
          // 获取当前卡片的激活Tab，默认值为'1'
          const currentActiveTab = activeTabs[cardKey] || '1'

          return (
            <Card key={cardKey}>
              <CardHeader> Message</CardHeader>
              <CardBody>
                <Nav> 
                  <NavItem> 
                    <Button 
                      className={currentActiveTab === '1' ? 'active' : ''} 
                      onClick={(e) => handleTab(e, currentActiveTab, cardKey)} 
                    >
                      {currentActiveTab === '1' ? 'Reply' : 'Message'}
                    </Button> 
                  </NavItem> 
                </Nav>
                <TabContent activeTab={currentActiveTab}>
                  <TabPane tabId='1'> {v.message} </TabPane>
                  <TabPane tabId='2'> {v.otherData} </TabPane> 
                </TabContent>
              </CardBody>
            </Card>
          )
        })
      : ""}
    </div>
  );
}

关键修改点说明 #

1. 状态结构调整：将单个activeTab字符串改为activeTabs对象，每个键对应一个卡片的唯一标识（ID或索引），值为该卡片的激活Tab ID。
2. 事件处理优化：handleTab函数通过展开运算符保留原有状态，仅修改当前卡片对应的Tab值，避免影响其他卡片。
3. 独立状态读取：每个卡片渲染时，读取自身标识对应的激活状态，默认使用'1'确保初始显示正确。
4. 可靠标识优先：如果你的data中每个项有唯一ID（如v.id），推荐用ID代替索引作为卡片标识，避免因数据顺序变化导致状态错乱。

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