Javascript 在react中使用“useState”时出现意外关键字“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,

在这里,当用户单击MUIDrawer的open prop时,我试图将其设置为true,但在设置状态时,我得到了一个错误,意外的关键字“true”

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谢谢,我真的很感谢这是一个函数