#javascript #reactjs #material-ui
#javascript #reactjs #material-ui
Вопрос:
Я начинаю создавать компонент заголовка для своего приложения 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);
Комментарии:
1. Похоже, что ваш метод onClick вкладки выхода выполняется перед вызовом изменения дескриптора. как только ваш метод onClick завершает вызов handleChange, в течение этого времени компонент tab исчезает. Вам нужно будет вызвать выход из системы при изменении дескриптора, когда значение равно 2.
2. @SachinVishwakarma Я попробовал то, что вы рекомендовали, но это все равно не сработало
3. это прискорбно, Но это имеет какое-то отношение только к этому событию. можете ли вы создать третью вкладку в качестве компонента кнопки и попробовать?
4. @SachinVishwakarma Да, у меня есть, но когда я это делаю, я получаю ошибку с
Received `false` for a non-boolean attribute indicator
. Кроме того, я получаю « React не распознаетselectionFollowsFocus
prop в элементе DOM«