Javascript 在react中使用“useState”时出现意外关键字“true”?
在这里,当用户单击MUIDrawer的open prop时,我试图将其设置为true,但在设置状态时,我得到了一个错误,意外的关键字“true”Javascript 在react中使用“useState”时出现意外关键字“true”?,javascript,reactjs,material-ui,react-lifecycle-hooks,Javascript,Reactjs,Material Ui,React Lifecycle Hooks,在这里,当用户单击MUIDrawer的open prop时,我试图将其设置为true,但在设置状态时,我得到了一个错误,意外的关键字“true” import React, { useState } from "react"; import { withRouter } from "react-router-dom"; import { Drawer as MUIDrawer, ListItem, List, ListItemIcon,
import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import {
Drawer as MUIDrawer,
ListItem,
List,
ListItemIcon,
ListItemText,
AppBar,
Toolbar,
IconButton
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";
const useStyles = makeStyles({
drawer: {
width: "190px"
}
});
const Drawer = props => {
const { history } = props;
const classes = useStyles();
const itemsList = [
{
text: "Home",
icon: <InboxIcon />,
onClick: () => history.push("/")
},
{
text: "About",
icon: <MailIcon />,
onClick: () => history.push("/about")
},
{
text: "Contact",
icon: <MailIcon />,
onClick: () => history.push("/contact")
}
];
[state, setState] = useState(false);
const toggleDrawer = {setState(true)}
return (
<>
<AppBar>
<Toolbar>
<IconButton
style={{ position: "absolute", right: "0" }}
onClick={toggleDrawer}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<MUIDrawer
className={classes.drawer}
open={state}
>
<List>
{itemsList.map((item, index) => {
const { text, icon, onClick } = item;
return (
<ListItem button key={text} onClick={onClick}>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText primary={text} />
</ListItem>
);
})}
</List>
</MUIDrawer>
</>
);
};
export default withRouter(Drawer);
尝试将toggleDrawer声明为函数,如下所示:
const-toggleDrawer==>setStatetrue尝试将toggleDrawer声明为函数,如下所示:
const-toggleDrawer==>setStatetrue错误在:
[state, setState] = useState(false);
const toggleDrawer = {setState(true)}
首先,您忘记了useState钩子中的const关键字
const [state, setState] = useState(false);
toggleDrawer必须是一个函数,您可以按如下方式进行操作:
const toggleDrawer = () => {setState(true)}
或
如果需要,可以在onClick中创建函数:
<IconButton
style={{ position: "absolute", right: "0" }}
onClick={()=>{setState(true)}}
>
最后,如果要在再次单击时将其设为false:
<IconButton
style={{ position: "absolute", right: "0" }}
onClick={()=>{setState(!state)}}
>
在最后一种情况下,设置状态!状态将允许您保存与状态相反的内容
然后,对于每次单击,状态值将更改为上一个值的相反值。错误在:
[state, setState] = useState(false);
const toggleDrawer = {setState(true)}
首先,您忘记了useState钩子中的const关键字
const [state, setState] = useState(false);
toggleDrawer必须是一个函数,您可以按如下方式进行操作:
const toggleDrawer = () => {setState(true)}
或
如果需要,可以在onClick中创建函数:
<IconButton
style={{ position: "absolute", right: "0" }}
onClick={()=>{setState(true)}}
>
最后,如果要在再次单击时将其设为false:
<IconButton
style={{ position: "absolute", right: "0" }}
onClick={()=>{setState(!state)}}
>
在最后一种情况下,设置状态!状态将允许您保存与状态相反的内容
然后,对于每次单击,状态值将更改为上一个值的相反值。toggleDrawer应声明为函数。在声明useState钩子时,您还忘记了const关键字。const[state,setState]=UseStateFalse谢谢,我真的很感谢它是一个函数ToggleDrawer应该声明为一个函数。在声明useState钩子时,您还忘记了const关键字。const[state,setState]=useStateFalse谢谢,我真的很感谢这是一个函数