Javascript 如何修复材质ui选项卡的错误，没有子选项卡匹配'；2'；？

我开始使用Material ui为我的react应用程序构建标题组件。在构建工具栏时，我添加了一个

选项卡

组件，并在其中添加了三个

选项卡

组件。一个用于主页，请与我们联系，然后注销。但我意识到，每当我按下除注销以外的任何其他选项卡时，一切都很好。但是，我一按logout，它就会抛出以下错误：

index.js:1 Material-UI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with `2`.
You can provide one of the following values: 0, 1. 

当阅读文档并更仔细地查看错误时，我意识到它与value state和setValue属性有关。所以我不确定我的问题是否是我必须设置一个变量来保存我的所有信息，然后我只是在我的选项卡组件中引用该变量。无论如何，我的目标是让注销选项卡以任何方式工作，而不产生此错误消息

import React, { useState, Fragment } from 'react';
import Toolbar from '@material-ui/core/Toolbar';
import { 
    AppBar, 
    Typography, 
    Tabs, 
    Tab, 
    SwipeableDrawer,
    IconButton,
    Button
} from '@material-ui/core';
import { Link } from 'react-router-dom';
import MenuIcon from "@material-ui/icons/Menu";
import { makeStyles } from '@material-ui/core/styles';
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../../../actions/auth';



const useStyles = makeStyles(theme => ({
    toolbarMargin: {
        ...theme.mixins.toolbar,
    },
      player: {
          marginBottom: "2em"
      },
      tabContainer: {
          marginLeft: "auto",
          
      },
      tab: {
          textTransform: "none",
          fontWeight: 400,
          fontSize: "1.3rem",
          color: "#000000"
       
      },
      bar: {
          backgroundColor: "#e5e5e5"
          
      },
      name: {
          color: "#000000"
      },
      drawerIcon: {
        height: "40px",
        width: "40px"
      },
      drawerIconContainer: {
          marginLeft: "auto",
          "&:hover": {
              backgroundColor: "transparent"
          }
      }
      
}));

const Header = ({ auth: { isAuthenticated, loading }, logout }) => {



    const classes = useStyles();
    const theme = useTheme();
    const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
    const matches = useMediaQuery(theme.breakpoints.down('sm'));
    const [value, setValue] = useState(0);
    const [openDrawer, setOpenDrawer] = useState(false);

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



    const authLinks =(
        <Tabs value={value} onChange={handleChange} className={classes.tabContainer} indicatorColor="primary">
            <Tab className={classes.tab} component={Link} to="/dashboard" label="Home" disableRipple />
            <Tab className={classes.tab} component={Link} to="/contact-us" label="Contact Us" disableRipple />
            <Tab className={classes.tab} onClick={logout} label="Logout" disableRipple />
        </Tabs>
    );


    const guestLinks = (
        
        <Tabs value={value} onChange={handleChange} className={classes.tabContainer} indicatorColor="primary">
            <Tab component={Link} to="/register" label="Register"/>
            <Tab component={Link} to="/login" label="Login"/>
        </Tabs>
        
    );


    

    // const drawer = (
    //     <React.Fragment>
    //         <SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} open={openDrawer} onClose={()=> setOpenDrawer(false)} onOpen={()=> setOpenDrawer(true)}>
    //             Contact Us
    //         </SwipeableDrawer>

    //         <IconButton className={classes.drawerIconContainer} onClick={() => setOpenDrawer(!openDrawer)} disableRipple>
    //             <MenuIcon className={classes.drawerIcon} />
    //         </IconButton>
    //     </React.Fragment>
    // );


    return (
        <React.Fragment>
            <AppBar className={classes.bar}>
                <Toolbar> 
                    <Typography variant="h5" className={classes.name}>SilverStone</Typography>
                    { !loading && (<Fragment>{ isAuthenticated ? authLinks : guestLinks } </Fragment>) }
                </Toolbar>
            </AppBar>
            <div className={classes.toolbarMargin} />
        </React.Fragment>
    );
}

Header.propTypes = {
    logout: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    auth: state.auth
})

export default connect(mapStateToProps, { logout })(Header);

import React，{useState，Fragment}来自“React”；
从“@material ui/core/Toolbar”导入工具栏；
导入{
阿帕巴，
排版，
标签，
标签，
可旋转抽屉，
IconButton，
按钮
}来自“@material ui/core”；
从'react router dom'导入{Link}；
从“@物料界面/图标/菜单”导入菜单图标；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/useMediaQuery”导入useMediaQuery；
从“@material ui/core/styles”导入{useTheme}”；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
从“../../../actions/auth”导入{logout}；
const useStyles=makeStyles（主题=>({
工具栏边距：{
…theme.mixins.toolbar，
},
玩家：{
marginBottom：“2em”
},
选项卡容器：{
marginLeft：“自动”，
},
选项卡：{
textTransform:“无”，
体重：400，
fontSize：“1.3rem”，
颜色：“000000”
},
酒吧：{
背景颜色：“e5”
},
姓名：{
颜色：“000000”
},
付款人：{
高度：“40px”，
宽度：“40px”
},
抽屉式容器：{
marginLeft：“自动”，
“&：悬停”：{
背景色：“透明”
}
}
}));
常量头=（{auth:{isAuthenticated，loading}，logout}）=>{
const classes=useStyles（）；
const theme=useTheme（）；
const iOS=process.browser&&/iPad | iPhone | iPod/.test（navigator.userAgent）；
const matches=useMediaQuery（theme.breakpoints.down（'sm'）；
const[value，setValue]=useState（0）；
const[openDrawer，setOpenDrawer]=useState（false）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
常量authLinks=(
);
const guestLinks=(
);
//常数抽屉=(
//     
//setOpenDrawer（false）}onOpen={（）=>setOpenDrawer（true）}>
//联系我们
//         
//setOpenDrawer（！openDrawer）}禁用Ripple>
//             
//         
//     
// );
返回(
银石
{！正在加载&（{isAuthenticated？authLinks:guestLinks}）}
);
}
Header.propTypes={
注销：需要PropTypes.func.isRequired，
auth:PropTypes.object.isRequired
}
常量mapStateToProps=状态=>({
auth:state.auth
})
导出默认连接（mapStateToProps，{logout}）（头）；

在调用句柄更改之前，似乎正在执行注销选项卡onClick方法。一旦onClick方法完成了调用handleChange的过程，tab组件就消失了。当值为2时，您必须在句柄更改中调用logout。@SachinVishwakarma我尝试了您建议的方法，但仍然没有成功，但它仅与该事件有关。您能将第三个选项卡设为按钮组件并重试吗？@SachinVishwakarma是的，我有，但当我这样做时，我收到一个错误，即非布尔属性指示符的

接收到'false'。另外，我得到的是，``React无法识别DOM元素上的
selectionFollowsFocus
prop```