如何设置Material UI Tabs默认无选中项且避免控制台报错？

你可以通过Material UI Tabs自带的allowUnselected属性实现需求，修改步骤如下：

• 给<Tabs>组件添加allowUnselected={true}属性，该属性官方默认值为false，开启后即允许标签栏存在无选中标签的状态，传入不匹配任何Tab的value不会触发报错
• 将state默认值改为false或null（只要是不在你现有Tab的value集合[0,1,2]中的值都可）

修改后的完整代码如下：

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(false);  // 改为false作为默认无选中的标识值
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <div className={classes.root}>
      <AppBar position="static">
        {/* 添加allowUnselected属性 */}
        <Tabs value={value} onChange={handleChange} allowUnselected={true} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

原报错原因：默认未开启allowUnselected时，Tabs组件强制要求传入的value必须匹配到某个子Tab的value值，你传入的undefined没有对应的Tab，因此触发合法性校验报错。

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