React Tabs选中状态判断问题：selectedIndex不更新如何解决？

我使用react-tabs实现了两个标签页，想要在点击第二个标签页时显示一条标签页外部的消息，但目前selectedIndex完全没有变化，导致消息无法触发。相关代码如下：

const [selectedIndex, setSelectedIndex] = useState(1);

<Tabs selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)} />
<TabList>
<Tab>One</Tab>
<Tab>Second</Tab>
</TabList>
<TabsPanel>content</TabsPanel>
<TabsPanel>content</TabsPanel>
</Tabs>

if (selectedIndex == 2) {
   //Show something
   //Need this msg outside the tabs
}

我按照react-tabs文档尝试后并未生效，希望能得到onSelect的替代方案，或者至少解决选中第二个标签页时selectedIndex不更新的问题。

核心问题：组件结构错误 #

你代码里的<Tabs>标签写成了自闭合形式<Tabs .../>，导致内部的TabList、Tab、TabsPanel都不在Tabs组件的作用域内，这直接导致onSelect回调根本不会触发，selectedIndex自然不会更新。

修复步骤 #

1. 修正Tabs组件的包裹结构
   把所有标签页相关元素都放在<Tabs>标签内部，不要自闭合：

const [selectedIndex, setSelectedIndex] = useState(0); // react-tabs默认索引从0开始，不是1

<Tabs selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)}>
  <TabList>
    <Tab>One</Tab>
    <Tab>Second</Tab>
  </TabList>
  <TabsPanel>content</TabsPanel>
  <TabsPanel>content</TabsPanel>
</Tabs>

2. 修正索引判断逻辑
   react-tabs的索引是从0开始计数的，第二个标签页对应的索引是1，不是2，所以判断条件要修改：

if (selectedIndex === 1) {
  // 这里编写你要显示的内容逻辑
}

替代方案：使用onChange回调 #

如果onSelect还是不生效，可以尝试用onChange回调替代（部分react-tabs版本中，更新索引的回调是onChange）：

<Tabs selectedIndex={selectedIndex} onChange={(index) => setSelectedIndex(index)}>
  {/* 内部标签结构不变 */}
</Tabs>

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