无论如何，是否可以将 Material UI 选项卡设置为默认未选中？

Question

我在我的项目中使用了材质 UI 选项卡，因为我认为它适合我的 Web 逻辑。但是，我需要将其设置为默认未选中。我所做的是将默认状态值设置为“未定义”。它实际上有效，因为默认情况下不会选择选项卡的第一项，但我还从控制台收到以下错误：

Material-UI：提供给 Tabs 组件的值无效。选项卡的子项均不与 匹配undefined。您可以提供以下值之一：0、1、2。

有人知道如何实现我的目标并避免错误消息吗？

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState();  //I set the default value to undefinded to make the Tabs unselected as default but also getting the error message.

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} 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>
  );
}

Answer 1

从文档>道具>值：

当前选定选项卡的值。如果您不需要任何选定的选项卡，可以将此属性设置为 false。

要实现此目的，请将初始值设置为 false：

const [value, setValue] = React.useState(false);