index.js:1375 警告：Material-UI：提供给 Tabs 组件的 `/` 值无效。所有 Tabs 子项都没有此值

Posted 2023-02-22

【中文标题】index.js:1375 警告：Material-UI：提供给 Tabs 组件的 `/` 值无效。所有 Tabs 子项都没有此值

【英文标题】：index.js:1375 Warning: Material-UI: the value provided `/` to the Tabs component is invalid. None of the Tabs children have this value

【发布时间】：2019-10-23 15:03:24

【问题描述】：

我正在使用 Material UI 选项卡和 React-Router，两者在视觉上都可以正常工作，但是我在使用开发人员工具时意识到，在手机尺寸的情况下，每次单击选项卡或菜单按钮时都会出现错误。错误说：

index.js:1375 Warning: Material-UI: the value provided/to the Tabs component is invalid. None of the Tabs children have this value. You can provide one of the following values: 0, 1, 2, 3, 4, 5.

我尝试用状态和活动索引结构替换路由器，但错误仍然存​​在。如何确保单击选项卡或菜单按钮时不会发生错误？以及如何确保它通过相关路径将我们顺利引导到相关页面？谢谢

PS：他们指向的屏幕都是文本，目前，没有什么特别的，如果需要显示代码，我可以编辑帖子，虽然我怀疑。再次感谢

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import  makeStyles, withStyles  from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import home from '../home.svg';
import Contact from '../Screens/Contact'
import contact from '../contact.svg';
import Profile from '../Screens/Profile'
import profile from '../profile.svg';
import Settings from '../Screens/Settings'
import settings from '../settings.svg'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import  Switch, Route, Link, BrowserRouter from "react-router-dom";



const VerticalTabs = withStyles(theme => (
  flexContainer: 
    flexDirection: "column"
  ,
  indicator: 
    display: "red"

  ,

  root:
    position:"fixed",
    left:-70,
    top:0,

  ,

))(Tabs);

const MyTab = withStyles(theme => (
  selected: 
    color: "white",
    borderRight: "none",


  ,
  root: 
  //minWidth: 121,
  margin:0,
 paddingBottom:119

  ,
  '@media screen and (min-width: 600px) and (max-width: 1205px)':

    root: 
      minWidth: 151,
    
  
))(Tab);


const styles = theme => (
  root: 
    flexGrow: 1,
    marginTop: theme.spacing(3),
    backgroundColor: theme.palette.background.paper,

  ,
  tabRoot: 
    minWidth: 10,
  ,
);

const useStyles = makeStyles(theme => (
  root: 
    display: 'flex',

  ,
  menuButton:
    visibility: "hidden"
  ,

  appBar: 
    marginLeft: 300,


  ,
  drawerPaper: 
    width: 100,
background: "#262A2C",
fontSize:65,
height:"120%",
top:-10


      ,


      content: 
        flexGrow: 1,
        padding: theme.spacing(3),

      ,

      '@media screen and (min-width: 600px) and (max-width: 1205px)':
        drawerPaper: 
          width: 80,
      //background: "black"
        ,


      ,

      '@media (max-width: 600px)':

        drawerPaper: 
          width: 300,
      //background: "black"
        ,
  appBar: 



  ,
  menuButton:
   visibility: "visible"
 ,
  

));



function ResponsiveDrawer() 
  const [value, setValue] = React.useState(0);
  const classes = useStyles();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  function handleChange(event, Value) 
    setValue(Value);
  




  function handleDrawerToggle() 
    setMobileOpen(!mobileOpen);
  

  const drawer = (




    <Route
          path="/"
          render=( location ) => (

              <nav>
                  <div style= left: 70, position: "relative", marginTop: 40 >

      <VerticalTabs value=location.pathname variant="fullWidth" onChange=handleChange  
          >
        <MyTab  
        component=Link to="/"
        icon =<img 
        className= "home"
        src=home 
         
        /*Pay FlatIcon or replace by design *//>
        label=<p className="home-Text" >
        Home
        </p> 
        />
        <MyTab  
        component=Link to="/Screens/Contact"
        icon =<img 
        className= "contact"
        src=contact  
         
        /*Pay FlatIcon or replace by design *//>
        label=<p className="contacts-Text" >
       Contact
        </p> 
        />
        <MyTab 
             component=Link to="/Screens/Profile"
        icon=<img 
        className= "profile" 
        src=profile 
         
        /*Pay FlatIcon or replace by design *//>
        label=<p className= "profile-Text" >
       Profile
        </p> 
        />
        <MyTab 
             component=Link to="/Screens/Settings"
        icon = <img
        className= "settings" 
        src=settings 
         
        /*Pay FlatIcon or replace by design *//>
        label=<p className="settings-Text" >
      Settings
        </p> 
        />


      </VerticalTabs>

                  </div>
                  </nav>

          )
          />





  );

  return (
    <nav>
    <BrowserRouter>
    <div className="aBar">
      <CssBaseline />
      <AppBar style=position:"relative",background: 'transparent', boxShadow: 'none', color: "red">
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="Open drawer"
            edge="start"
            onClick=handleDrawerToggle
            className=classes.menuButton
          >
            <MenuIcon />

          </IconButton>
          <SearchBar />
          <div className="logo">
          <Typography 
          component=Link
          to="/"
          className= "logo-Spec" 
          style=fontSize:30, textDecoration: 'none'  
          variant="h1"
          //don't forget variant= "h1" if you want to modify logo style
          >

          Logo 

          </Typography>
          </div>
        </Toolbar>
      </AppBar>
      <nav className=classes.drawer>
        /* The implementation can be swapped with js to avoid SEO duplication of links. */
        <Hidden smUp implementation="css">
          <Drawer
          style=color:"black"
            variant="temporary"
            open=mobileOpen
            onClose=handleDrawerToggle
            classes=
              paper: classes.drawerPaper,
            
            ModalProps=
              keepMounted: true, // Better open performance on mobile.
            
          >
            drawer
          </Drawer>

        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes=
              paper: classes.drawerPaper,
            
            variant="permanent"
            open
          >
            drawer
          </Drawer>

        </Hidden>

        <Switch>

                <Route path="/Screens/Contact" component=Contact  />
                <Route path="/Screens/Settings" component=Settings />
                <Route path="/Screens/Profile" component=Profile  />
                <Route path="/" component=Home />

              </Switch>
      </nav>

    </div>
    </BrowserRouter>
    </nav>
  );





export default  withStyles(styles)(ResponsiveDrawer);

【问题讨论】：

提供您的问题的最小示例

我已经为你编辑了问题

【参考方案1】：

在您的Tabs 元素上，您的值为location.pathname。这表明“选定”选项卡是具有此值的选项卡，但您没有为任何选项卡指定 value 属性。未指定值时，Tab 的值默认为其在 Tabs 父级中的索引。

错误消息告诉您选项卡上的值（通过 VerticalTabs）与您的各个选项卡元素（MyTab）上的任何值都不匹配。要解决此问题，您应该将 to 属性中的值也指定为 Tab 元素上的 value 属性。

参考资料：

https://material-ui.com/api/tabs/ https://material-ui.com/api/tab/

【讨论】：

嗨 Ryan 感谢您的回复，所以我所做的是我删除了 location.pathname 并将值替换为 value 而其初始状态等于 0。之后，它当我单击选项卡或菜单时工作，开发工具上没有错误。我没有更改选项卡元素的值。另一个改变的因素是 PrivateTabIndicator 是可见的，所以我会想办法把它取下来。如果您认为我的方法会长期影响代码，请随时提供更好的示例解决方案，再次感谢。