MUI Tabs条件显示标签页时出现value无效错误，如何解决？

问题根源 #

当隐藏value="1"的标签页时，Tabs组件的value属性仍为"1"，但此时没有任何子Tab的value等于"1"，违反了受控模式下的规则，因此触发报错。

解决方法 #

1. 隐藏标签页时同步切换选中值

在控制标签页显示/隐藏的逻辑中，判断当前选中值是否是即将被隐藏的Tab的value，如果是，就主动切换到一个存在的Tab的value：

const [activeTab, setActiveTab] = useState("1");
const [showTab1, setShowTab1] = useState(true);

const hideTab1 = () => {
  if (activeTab === "1") {
    // 切换到第一个存在的标签页
    setActiveTab("2");
  }
  setShowTab1(false);
};

2. 动态计算有效的选中值

每次渲染时，先确认当前选中值是否在可见Tab的value列表中，如果不在，就自动 fallback 到第一个可见的Tab的value：

const [activeTab, setActiveTab] = useState("1");
const showTab1 = false; // 控制标签1显示的状态

// 收集当前可见的Tab的value
const visibleTabValues = [];
if (showTab1) visibleTabValues.push("1");
visibleTabValues.push("2", "3", "4");

// 计算有效的选中值
const validActiveTab = visibleTabValues.includes(activeTab) 
  ? activeTab 
  : visibleTabValues[0];

// 渲染Tabs时使用validActiveTab
<Tabs value={validActiveTab} onChange={(e, val) => setActiveTab(val)}>
  {showTab1 && <Tab label="标签1" value="1" />}
  <Tab label="标签2" value="2" />
  <Tab label="标签3" value="3" />
  <Tab label="标签4" value="4" />
</Tabs>

3. 用禁用替代隐藏（可选）

如果业务允许，可以不直接移除Tab，而是用disabled属性禁用它，这样value="1"依然存在于Tabs的子项中，不会触发报错：

<Tabs value={activeTab} onChange={(e, val) => setActiveTab(val)}>
  <Tab label="标签1" value="1" disabled={!showTab1} />
  <Tab label="标签2" value="2" />
  <Tab label="标签3" value="3" />
  <Tab label="标签4" value="4" />
</Tabs>

核心原则 #

MUI的Tabs组件在受控模式下，value必须对应一个当前存在的子Tab的value，所以始终要保证选中值和可见Tab的选项保持一致。

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