Блог

Я начинаю создавать компонент заголовка для своего приложения react, используя Material-ui. При создании панели инструментов я добавил Tabs компонент, а внутри добавил три Tab компонента. Один для дома, свяжитесь с нами и для выхода из системы. Однако я понимаю, что всякий раз, когда я нажимаю любую другую вкладку, кроме выхода из системы, все в порядке. Однако, как только я нажимаю выход, он выдает следующую ошибку:

 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. 
  

При чтении документации и более внимательном рассмотрении ошибки я понял, что это как-то связано с состоянием значения и свойством setValue. Поэтому я не уверен, что моя проблема в том, что мне нужно установить переменную для хранения всей моей информации, а затем я просто делаю ссылку на переменную в моем компоненте Tab. Несмотря на это, моя цель состоит в том, чтобы просто заставить вкладку выхода работать любым способом, который не выдает это сообщение об ошибке.

 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",
          "amp;:hover": {
              backgroundColor: "transparent"
          }
      }
      
}));

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



    const classes = useStyles();
    const theme = useTheme();
    const iOS = process.browser amp;amp; /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 amp;amp; (<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);